easyui datagrid分页方法区别
1.通过pager对象进行分页设置
网上百度datagrid分页，看到大部门都是通过如下脚本所示的进行设置：
$(function(){
var p = $('#hdr').datagrid('getPager');
$(p).pagination({
pageSize: 20, //每页显示的记录条数，默认10
pageList: [20,20,50,100], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
});
上述情况大多数正常不会有错，但是当出现以下情况问题就来了：
$(function(){
var p = $('#hdr').datagrid('getPager');
$(p).pagination({
pageSize: 20, //每页显示的记录条数，默认10
pageList: [20,20,50,100], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
alert($('#hdr').datagrid('getPager').data("pagination").options.pageList) // 弹出20,20,50,100
$('#hdr').datagrid({
onLoadSuccess : function(data) {
console.log("111")
}
});
alert($('#hdr').datagrid('getPager').data("pagination").options.pageList) // 弹出默认的10,20,30,40,50，并且之前渲染的中文脚本也被替换了
});
在page设置之后再添加datagrid事件绑定或者其他$("#id").datagrid({...})脚本时，会重新渲染，pager设置的脚本会失效，datagrid原生注册的事件或属性不会失效。
因此为了避免这种情况出现，大家务必把此种方法分页放到脚本最后面
小弟不才，求哪位大神解释这种pager方法的原理
2. 通过datagrid本身的属性进行分页设置，js脚本或者html语言
$('#hdr').datagrid({
pageSize:10,
pageList: [10,20,50,100]
});
alert($('#hdr').datagrid('getPager').data("pagination").options.pageList); // 弹出10,20,50,100
$('#hdr').datagrid({
onLoadSuccess : function(data) {
console.log("111")
}
});
alert($('#hdr').datagrid('getPager').data("pagination").options.pageList); // 弹出10,20,50,100
上面例子都是在easyui->datagrid->basic.html进行修改的添加的script脚本，鄙人所用easyui版本1.4.3，下面附上源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</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.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div>
<table id="hdr" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,striped:true,collapsible:true,url:'datagrid_data1.json',method:'get',pagination:true,pageSize:10">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script>
$(function(){
var p = $('#hdr').datagrid('getPager');
$(p).pagination({
pageSize: 20, //每页显示的记录条数，默认10
pageList: [20,20,50,100], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
alert($('#hdr').datagrid('getPager').data("pagination").options.pageList) // 弹出20,20,50,100
$('#hdr').datagrid({
pageSize:50,
pageList: [50,100]
});
alert($('#hdr').datagrid('getPager').data("pagination").options.pageList) // 弹出默认的10,20,30,40,50，并且之前渲染的中文脚本也被替换了
});
</script>
</body>
</html>