<html lang="en">
<head>
<meta charset="UTF-8">
<title>easyui-table表格客户端分页实例</title>
<link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
<script type="text/javascript" src="./easyui/jquery.min.js"></script>
<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
</head>
<body>
<script type="text/javascript">
//手动制造30条测试数据
var data = [];
for (var i = 1; i < 31; ++i) {
data.push({
"movie":"战狼"+i,
"director":"吴京" + i +"号"
})
}
$(function () {
$("#easyuiTable").datagrid({
title:"easyui测试客户端分页",
rownumbers:true,
fitColumns:true,
pagination:true,
data:data.slice(0,10),
columns:[
[
{field:'movie', align:"center", title:"电影",width:100},
{field:'director', align:"center", title:"导演",width:100}
]
] //easyui需要两个破折号
});
//以下代码处理分页功能，可直接使用
var pager = $("#easyuiTable").datagrid("getPager");
pager.pagination({
total:data.length,
displayMsg:'当前显示从第{from}条到{to}条 共{total}条记录',
onSelectPage:function (pageNo, pageSize) {
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#easyuiTable").datagrid("loadData", data.slice(start, end));
pager.pagination('refresh', {
total:data.length,
pageNumber:pageNo
});
}
});
});
</script>
</head>
<body>
<div id="easyuiTable"></div>
</body>
</html>
三、总结
1. easyui-table客户端分页只需要几个步骤即可实现：引入easyui的js、css；html页面添加一个table
标签同时给id赋值；js添加初始化代码；
2.easyui-table客户端分页的数据源可以是服务器端传递过来，也可以是前端js获取，该实例使用的是前端
js的数据源，初始化参数需要添加data，同时去掉url；
3.easyui-table客户端分页和bootstrap-table的使用方法有点不同，bootstrap相对来说会比较简单使用，而easyui需要自行设置分页方式，需要添加额外的js代码进行分页；
