jQuery EasyUI datagrid本地分页

最新推荐文章于 2022-08-05 15:12:15 发布

笔心

最新推荐文章于 2022-08-05 15:12:15 发布

阅读量1.6w

点赞数 1

分类专栏： jQuery 文章标签： EasyUI EasyUI本地分页 EasyUI前端分页 datagrid

本文链接：https://blog.csdn.net/qinshenxue/article/details/26557733

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。

这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>
    <link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
    <script type="text/javascript">

        // 表格数据源
        var data = [];
        // 用代码造30条数据
        for (var i = 1; i < 31; ++i) {
            data.push({
                "id":i,
                "name":"Student" + i
            })
        }

        $(function () {

            $("#dd").datagrid({
                title:"测试本地分页",
                rownumbers:true,
                fitColumns:true,
                pagination:true,
                data:data.slice(0,10),
                columns:[
                    [
                        {field:'id', align:"center", title:"编号", width:100},
                        {field:'name', align:"center", title:"姓名", width:100}
                    ]
                ]
            });

            var pager = $("#dd").datagrid("getPager");
            pager.pagination({
                total:data.length,
                onSelectPage:function (pageNo, pageSize) {
                    var start = (pageNo - 1) * pageSize;
                    var end = start + pageSize;
                    $("#dd").datagrid("loadData", data.slice(start, end));
                    pager.pagination('refresh', {
                        total:data.length,
                        pageNumber:pageNo
                    });
                }
            });

        });

    </script>
</head>
<body>
<div id="dd"></div>
</body>
</html>