EasyUI pagination

痛定思痛。 2022-04-24 23:00 180阅读 0赞

## intro ##

`easyui-panel` 面板  
`easyui-pagination` 分页条

## 前后端接口 ##

`/GetUserList?pageNumber=${pageNumber}&pageSize=${pageSize}`  
`/GetTableCount?tableName=${tableName}`

## html ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
        
        <link rel="stylesheet" type="text/css" href="/resources/jquery-easyui-1.7.0/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="/resources/jquery-easyui-1.7.0/themes/icon.css">
        
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
    
        <title>用户分页 easyui-pagination</title>
    </head>
    <body>
    
    <div id="content" class="easyui-panel" style="background:#eee;height:200px"></div>
    <div id="pagination" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"></div>
    
    <script>
    // 获取行数total，同步执行的方法
    function getTotal(tableName) {
        let retValue = 0;
        $.ajax({
            url: `/GetTableCount?tableName=${tableName}`,
            async: false,
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                retValue = data["data"][0]["rows"];
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR, textStatus, errorThrown);
            }
        });
        return retValue;
    }
    
    // 创建panel
    $("#content").panel({
        href: "/GetUserList?pageNumber=1&pageSize=5",
        loadingMessage: "远程数据加载中...",
        extractor: function(data) {
            var result = JSON.parse(data);
            if (result.success) {
                return JSON.stringify(result.data);
            } else {
                return JSON.stringify(result, ["msg", "sql", "exception"]);
            }
        }
    });
    
    // 创建pagination
    $("#pagination").pagination({
        pageList: [3, 5, 10, 20],
        pageSize: 5,    /* 初始的页大小 */
        pageNumber: 1,  /* 初始的页码 */
        total: getTotal("user"),    /* 同步方法，获取表的记录数 */
    
        beforePageText: "第",
        afterPageText: "页 共{pages}页",
        displayMsg: "总记录数: {total}  显示: [{from}, {to}]",
    
        // layout: ["list", "sep", "first", "prev", "sep", "manual", "sep", "next", "last", "sep", "refresh", "sep", "info"],
        // layout: ["list", "sep", "links", "sep", "refresh", "sep", "info"],
    
        showPageList: true,
        showRefresh: true,
        showPageInfo: true,
    
        onSelectPage: function(pageNumber, pageSize) {
            // console.log(`pageNumber: ${pageNumber}, pageSize: ${pageSize}`);
            $("#content").panel("refresh", `/GetUserList?pageNumber=${pageNumber}&pageSize=${pageSize}`);
        },
        onBeforeRefresh: function(pageNumber, pageSize) {
            // console.log(`pageNumber: ${pageNumber}, pageSize: ${pageSize}`);
            // 重设总记录数total
            $("#pagination").pagination({
                total: getTotal("user")
            });
        }
    });
    </script>
    
    </body>
    </html>

## NOTE ##

`getTotal(tableName)`方法是同步的，这会导致浏览器控制台输出`info`级别的日志：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated 
    because of its detrimental effects to the end user's experience. 
    For more help, check https://xhr.spec.whatwg.org/.

主线程中的同步XHR已被弃用(因为这会影响终端用户的体验)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]  
暂时不影响使用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]: /images/20220212/dbe66e1b78a34f3c8292332fdabd5010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]: /images/20220212/300871529dfc4a2ba9c6f64388927ee9.png