This is the example that enables client side pagination on combogrid component.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
(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<=200; 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(){
$('#cg').combogrid('grid').datagrid({
data: getData(),
pagination: true,
rownumbers: true
}).datagrid('clientPaging');
})
</script>
</head>
<body>
<select id="cg" class="easyui-combogrid" style="width:200px;display:none" data-options="
panelWidth: 800,
idField: 'inv',
textField: 'name',
columns: [[
{field:'inv',title:'Inv No',width:80},
{field:'date',title:'Date',width:120},
{field:'name',title:'Name',width:80,align:'right'},
{field:'price',title:'Price',width:80,align:'right'},
{field:'cost',title:'Cost',width:200},
{field:'note',title:'Note',width:60}
]],
fitColumns: true,
label: 'Select Items:',
labelPosition: 'top'
">
</select>
</body>
</html>
