easyui datagrid pagination分页模拟实现

骑猪看日落 2022-04-15 00:53 343阅读 0赞

easyui给出的分页组件，需要结合datagrid，pagination，数据展现使用datagrid，分页展现使用的是pagination，两者必须混合使用，才能展现一个分页列表，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

默认的分页列表实现如下：

<table class="easyui-datagrid" id="datagrid" style="width:100%;" data-options="url:'getdata.json',
    method:'get',pagination:true,fitcolumns:true,scrollbarSize:0">
        <thead>
          <th data-options="field:'id',align:'center',width:'20%'">ID</th>
          <th data-options="field:'name',align:'center',width:'20%'">Name</th>
          <th data-options="field:'mobile',align:'center',width:'20%'">Mobile</th>
          <th data-options="field:'email',align:'center',width:'20%'">Email</th>
          <th data-options="field:'status',align:'center',width:'20%'">Status</th>
        </thead>
        <tbody>
        </tbody>
    </table>

重点内容在table标签的class="easyui-datagrid"，然后就是data-options="url:'getdata.json',method:'get',pagination:'true',

fitcolumns:true,scrollbarSize:0"，这样一个分页列表就实现了，datagrid默认的分页接口请求是post的，所以这里如果有必要需要设置method:'get'，另外pagination:true是用来设置分页的，fitcolumns:true,scrollbarSize:0解决列表的右侧空白问题。

这样默认的分页解决了，但是这里有一些问题：

第一个，就是如果带着条件查询的，那么这么写就有问题了，url写死了，没有设置条件的地方，

第二个，就是分页底部展示的信息默认是英文的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

为了解决这些问题，就必须手动设置datagrid的数据，以及分页英文显示的问题。

1、ajax获取收据

$.ajax({
      url:"getdata.json",
      type:"get",
      dataType:"json",
      success:function(data){
          if(data){
    	   $("#datagrid").datagrid("loadData",data);
          }
      }
    });

2、设置分页

$("#datagrid").datagrid({
       fitcolumns:true,
       scrollbarSize:0,
       pagination:true,
       method:'get'
    }).datagrid("getPager").pagination({
       displayMsg:"总共{total}条记录",
       onSelectPage:function(page,size){
    	console.log(page,size);
    	var num = "";
    	if(page%2==0){
    		num="-2";
    	}
    	$.ajax({
    	    url:"getdata"+num+".json",
    	    type:"get",
    	    dataType:"json",
    	    success:function(data){
    		if(data){
    		    $("#datagrid").datagrid("loadData",data);
    		}
    	    }
    	});
       }
    });

这样，一个完整的分页就解决了，显示中文使用了displayMsg:"总共\{total\}条记录"。按照条件查询分页时传入参数使用onSelectPage:function()\{\}解决。这里全部是前端实现的分页，ajax数据也是模拟的后台接口，数据分别如下：

getdata.json

{
      "rows":[
        {"id":"101","name":"zhangsan1","email":"zhangsan@126.com","mobile":"15900909891","status":1},
        {"id":"102","name":"zhangsan2","email":"zhangsan@126.com","mobile":"15900909892","status":1},
    	{"id":"103","name":"zhangsan3","email":"zhangsan@126.com","mobile":"15900909893","status":1},
    	{"id":"104","name":"zhangsan4","email":"zhangsan@126.com","mobile":"15900909894","status":1},
    	{"id":"105","name":"zhangsan5","email":"zhangsan@126.com","mobile":"15900909895","status":1},
    	{"id":"106","name":"zhangsan6","email":"zhangsan@126.com","mobile":"15900909896","status":1},
    	{"id":"107","name":"zhangsan7","email":"zhangsan@126.com","mobile":"15900909897","status":1},
    	{"id":"108","name":"zhangsan8","email":"zhangsan@126.com","mobile":"15900909898","status":1},
    	{"id":"109","name":"zhangsan9","email":"zhangsan@126.com","mobile":"15900909899","status":1},
    	{"id":"110","name":"zhangsan10","email":"zhangsan@126.com","mobile":"15900909810","status":1}
      ],
      "total":23
    }

getdata-2.json

{
      "rows":[
        {"id":"201","name":"lisi1","email":"lisi@126.com","mobile":"13900909891","status":1},
        {"id":"202","name":"lisi2","email":"lisi@126.com","mobile":"13900909892","status":1},
    	{"id":"203","name":"lisi3","email":"lisi@126.com","mobile":"13900909893","status":1},
    	{"id":"204","name":"lisi4","email":"lisi@126.com","mobile":"13900909894","status":1},
    	{"id":"205","name":"lisi5","email":"lisi@126.com","mobile":"13900909895","status":1},
    	{"id":"206","name":"lisi6","email":"lisi@126.com","mobile":"13900909896","status":1},
    	{"id":"207","name":"lisi7","email":"lisi@126.com","mobile":"13900909897","status":1},
    	{"id":"208","name":"lisi8","email":"lisi@126.com","mobile":"13900909898","status":1},
    	{"id":"209","name":"lisi9","email":"lisi@126.com","mobile":"13900909899","status":1},
    	{"id":"210","name":"lisi10","email":"lisi@126.com","mobile":"13900909810","status":1}
      ],
      "total":23
    }

这里为了动态显示分页数据，前端直接采用了两个getdata.json,getdata-2.json数据响应来模拟。

分页效果如下：

![20181119183322499.gif][]

datagrid赋值时，$("\#datagrid").datagrid("loadData",data) 可以直接赋值一个数组，也可以赋值一个\{rows:\[\],total:23\}的json分页对象。这里如果赋值数组，那么分页数据会失效，最好赋值一个json分页对象。

全部代码附上：

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8"/>
    <title>分页列表</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="../demo/demo.css"/>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
        <div class="easyui-container-fluid">
            <div class="easyui-panel">
                <form id="ff">
                    <div style="margin-bottom:20px;padding-top:20px;">
                    <input name="name" class="easyui-textbox" 
                    data-options="label:'姓名：'"/>
                    </div>
                    <div style="margin-bottom:20px;text-align:center">
                        <a class="easyui-linkbutton c8" href="javascript:void(0);"
                        onclick="search()">查询</a>
                    </div>
                </form>
            </div>
            <div class="easyui-panel" style="width:100%;border:none;" 
                data-options="title:'用户列表'">		    
                <div class="table-wrapper">
                    <table class="easyui-datagrid" id="datagrid" style="width:100%;">
                        <thead>
                            <th data-options="field:'id',align:'center',
                             width:'20%'">ID</th>
                            <th data-options="field:'name',align:'center',
                             width:'20%'">Name</th>
                            <th data-options="field:'mobile',align:'center',
                             width:'20%'">Mobile</th>
                            <th data-options="field:'email',align:'center',
                             width:'20%'">Email</th>
                            <th data-options="field:'status',align:'center',
                             width:'20%'">Status</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                  </div>
            </div>
        </div>
    <script type="text/javascript">
        $(function(){
            $("#datagrid").datagrid({
                fitcolumns:true,
                scrollbarSize:0,
                pagination:true,
                method:'get'
            }).datagrid("getPager").pagination({
                displayMsg:"总共{total}条记录",
                onSelectPage:function(page,size){
                    console.log(page,size);
                    var num = "";
                    if(page%2==0){
                        num="-2";
                    }
                     $.ajax({
                        url:"getdata"+num+".json",
                        type:"get",
                        dataType:"json",
                        success:function(data){
                            if(data){
                                $("#datagrid").datagrid("loadData",data);
                            }
                        }
                    });
                }
            });
            $.ajax({
                url:"getdata.json",
                type:"get",
                dataType:"json",
                success:function(data){
                    if(data){
                         $("#datagrid").datagrid("loadData",data);
                    }
                }
            });	
        });
        function search(){
            //todo pagination search
        }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220415/1599df406c084636b2443f780319536e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220415/b84e33983d774349a238a1604e52f42c.png
[20181119183322499.gif]: /images/20220415/0cfeb4d01d234df8b43f5e1c4570570a.png