版权声明：本文为博主原创文章，如需转载，请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083
一、前言
前一篇博客已经介绍了bootstrap-table的客户端分页，而本篇博客将会介绍另一种插件分页—easyui-table；
easyui-table也是是非常方便好用的前端表格分页插件，使用者只需要提供数据源就能实现非常完美的分页
效果，其分页方式可以分成客户端分页和服务端分页，其接收的数据源都是json数据格式。服务端分页在项目中
应用得非常的广泛，但有时也需要使用客户端分页来加快分页速度。本篇博客就不介绍服务端分页，只提供
easyui-table客户端分页的简单例子（数据源也从前端获取），供初学者了解使用。
二、实例
<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代码进行分页；
3.本博客的实例下载路径：http://download.csdn.net/detail/alan_liuyue/9922822
![EasyUI-DataGrid控件[表格+日历]应用](https://ucc.alicdn.com/pic/developer-ecology/cb1b36e8855642b5bcc71862cfcac533.png?x-oss-process=image/resize,h_160,m_lfit)
