easyui datagrid pagination分页模拟实现

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

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

<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写死了，没有设置条件的地方，

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

为了解决这些问题，就必须手动设置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数据响应来模拟。

分页效果如下：

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>