<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>Client Side Pagination in 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>Client Side Pagination in DataGrid</h2>
|
<p>This sample shows how to implement client side pagination in DataGrid.</p>
|
<div style="margin:20px 0;"></div>
|
|
<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($){
|
function pagerFilter(data){
|
if ($.isArray(data)){ // is array
|
data = {
|
total: data.length,
|
rows: data
|
}
|
}
|
var target = this;
|
var dg = $(target);
|
var state = dg.data('datagrid');
|
var opts = dg.datagrid('options');
|
if (!state.allRows){
|
state.allRows = (data.rows);
|
}
|
if (!opts.remoteSort && opts.sortName){
|
var names = opts.sortName.split(',');
|
var orders = opts.sortOrder.split(',');
|
state.allRows.sort(function(r1,r2){
|
var r = 0;
|
for(var i=0; i<names.length; i++){
|
var sn = names[i];
|
var so = orders[i];
|
var col = $(target).datagrid('getColumnOption', sn);
|
var sortFunc = col.sorter || function(a,b){
|
return a==b ? 0 : (a>b?1:-1);
|
};
|
r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
|
if (r != 0){
|
return r;
|
}
|
}
|
return r;
|
});
|
}
|
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
|
var end = start + parseInt(opts.pageSize);
|
data.rows = state.allRows.slice(start, end);
|
return data;
|
}
|
|
var loadDataMethod = $.fn.datagrid.methods.loadData;
|
var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
|
$.extend($.fn.datagrid.methods, {
|
clientPaging: function(jq){
|
return jq.each(function(){
|
var dg = $(this);
|
var state = dg.data('datagrid');
|
var opts = state.options;
|
opts.loadFilter = pagerFilter;
|
var onBeforeLoad = opts.onBeforeLoad;
|
opts.onBeforeLoad = function(param){
|
state.allRows = null;
|
return onBeforeLoad.call(this, param);
|
}
|
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',state.allRows);
|
}
|
});
|
$(this).datagrid('loadData', state.data);
|
if (opts.url){
|
$(this).datagrid('reload');
|
}
|
});
|
},
|
loadData: function(jq, data){
|
jq.each(function(){
|
$(this).data('datagrid').allRows = null;
|
});
|
return loadDataMethod.call($.fn.datagrid.methods, jq, data);
|
},
|
deleteRow: function(jq, index){
|
return jq.each(function(){
|
var row = $(this).datagrid('getRows')[index];
|
deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
|
var state = $(this).data('datagrid');
|
if (state.options.loadFilter == pagerFilter){
|
for(var i=0; i<state.allRows.length; i++){
|
if (state.allRows[i] == row){
|
state.allRows.splice(i,1);
|
break;
|
}
|
}
|
$(this).datagrid('loadData', state.allRows);
|
}
|
});
|
},
|
getAllRows: function(jq){
|
return jq.data('datagrid').allRows;
|
}
|
})
|
})(jQuery);
|
|
function getData(){
|
var rows = [];
|
for(var i=1; i<=800; 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(){
|
$('#dg').datagrid({data:getData()}).datagrid('clientPaging');
|
});
|
</script>
|
</body>
|
</html>
|
