前段时间突然需要用到easyUI的分页插件，但是我从来没有接触过easyUI，没办法，就开始自己研究，也看了好些文档和博客！这个记录一下我的笔记和心得！
1.easyUI分页插件依附于表格实现，所以第一步需要添加数据网格插件（datagrid）
2.然后开启分页组件（pagination）,默认是英文的，如需中文显示，则需要导入easyui-lang-zh_CN.js(位于easyUI的local文件夹中)
3.中文文档地址：http://www.jeasyui.net/plugins/155.html点击打开链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户端分页demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>客户端分页demo</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div></div>
</div>
<div style="margin:10px 0;"></div>
<!--
data-options:通过 <table> 标记创建数据网格（datagrid）。嵌套的 <th> 标签定义表格中的列。
rownumbers:设置为true将显示行数。
singleSelect(boolean):设置为true将只允许选择一行。
autoRowHeight(boolean):定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。
pagination:设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
pageSize:初始化页面尺寸,及每页显示的数据记录数
-->
<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>
<script>
//模拟数据
function getData(){
var rows = [];
for(var i=1; i<=80000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
return rows;
}
function pagerFilter(data){
// 判断数据是否是数组，如果数据源来自于后台json,则需要对数据源做数据解析
if (typeof data.length == 'number' && typeof data.splice == 'function'){
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
//获得初始化dg时的option对象；而option里面的所有属性就是dg初始化设置的属性；
var opts = dg.datagrid('options');
//获取dg的分页（pager）对象。
var pager = dg.datagrid('getPager');
//创建分页（pagination）
pager.pagination({
//当用户选择新的页面时触发。回调函数包含两个参数：pageNumber：新的页码 pageSize：新的页面尺寸
//easyUI分页提供的属性：pageNum（目标页面的页数编号），pageSize(目标页面的尺寸)
onSelectPage:function(pageNum, pageSize){
alert(pageNum);
//创建分页（pagination）时显示的页码。
opts.pageNumber = pageNum;
//页面尺寸。（注：每页显示的最大记录数）
opts.pageSize = pageSize;
//刷新并显示分页信息
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
//从data中加载本地数据，旧行被移除
dg.datagrid('loadData',data);
}
});
//查询data的可用数据 !undefined等于true
if (!data.originalRows){
data.originalRows = (data.rows);
}
//显示数据的起始位置
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
//显示数据的结束位置
var end = start + parseInt(opts.pageSize);
//data的rows属性 ; slice() 方法可从已有的数组中返回选定的元素。
data.rows = (data.originalRows.slice(start, end));
return data;
}
$(function(){//加载数据
//loaddata:加载本地数据，旧的行会被移除。loadFilter可以返回过滤后的数据进行展示
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
});
</script>
</body>
</html>