假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目
在假分页的情况下获取所有数据：
var totalData = $("#datagrid").datagrid(‘getData‘);
var rows = totalData.originalRows;
完整的Demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<title></title>
<script>
$(document).ready(function() {
$("#datagrid").datagrid({
pagination: true, //分页控件
pageSize: 3,
pageList: [3, 6, 9],
loadFilter: partPurchasePagerFilter
}).datagrid(‘loadData‘, getData());
$("#btn").click(function(){
//获取假分页的所有数据
var totalData = $("#datagrid").datagrid(‘getData‘);
var rows = totalData.originalRows;
$.each(rows,function(i,value){
alert("所有行 "+value.stuNo+" "+value.stuName+" "+value.stuSex);
})
//获取假分页的当前页数据
var currentRows = $("#datagrid").datagrid(‘getRows‘);
$.each(currentRows,function(i,value){
alert("当前页 "+value.stuNo+" "+value.stuName+" "+value.stuSex);
})
});
});
function getData(){
var rows = [];
for(var i=1; i<=10; i++){
rows.push({
stuNo: 2230+i,
stuName: ‘Name‘+i,
stuSex: ‘男‘
});
}
return rows;
}
function partPurchasePagerFilter(data) {
if(typeof data.length == ‘number‘ && typeof data.splice == ‘function‘) {
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
//返回属性对象
var opts = dg.datagrid(‘options‘);
//返回页面对象
var pager = dg.datagrid(‘getPager‘);
pager.pagination({
onSelectPage: function(pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination(‘refresh‘, {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid(‘loadData‘, data);
}
});
if(!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
</script>
</head>
<body>
<table data-options="fitColumns:true,rownumbers:true" id="datagrid" class="easyui-datagrid" title="学生">
<thead>
<tr>
<th data-options="field:‘stuNo‘,width:100">学号</th>
<th data-options="field:‘stuName‘,width:100"> 姓名 </th>
<th data-options="field:‘stuSex‘,width:100">性别</th>
</tr>
</thead>
</table>
<button id="btn">获取数据</button>
</body>
</html>
原文地址：https://www.cnblogs.com/xianya/p/9890813.html
时间： 2024-08-09 05:12:32