jQuery EasyUI从入门到精通（14）DataGrid（4）

2025-11-16 01:54:08

1、Custom DataGrid Pager（自定义数据表格分页），You can append some buttons to the standard datagrid pager bar（你可以附加一些按钮在标准的数据表格分页器上）.

<!DOCTYPE html>

<html>

<head>

<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>

</head>

<body>

<h2>Custom DataGrid Pager</h2>

You can append some buttons to the standard datagrid pager bar.

<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"

data-options="rownumbers:true,singleSelect:true,pagination:true,url:'datagrid_data1.json',method:'get'">

<thead>

<tr>

<th data-options="field:'productid',width:100">Product</th>

<th data-options="field:'listprice',width:80,align:'right'">List Price</th>

<th data-options="field:'attr1',width:240">Attribute</th>

<th data-options="field:'status',width:60,align:'center'">Status</th>

</tr>

</thead>

</table>

$(function(){

var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid

pager.pagination({

buttons:[{

iconCls:'icon-search',

handler:function(){

alert('search');

}

},{

iconCls:'icon-add',

handler:function(){

alert('add');

}

},{

iconCls:'icon-edit',

handler:function(){

alert('edit');

}

}]

});

})

</script>

</body>

</html>

jQuery EasyUI从入门到精通（14）DataGrid（4）

2、Custom DataGrid Pager（自定义数据表格分页），运行效果如下图所示。

jQuery EasyUI从入门到精通（14）DataGrid（4）

3、Server Side Pagination（服务器端分页），Click the page bar to change page number or page size.

<html>

<head>

<title>DataGrid Pagination - jQuery EasyUI Demo</title>

</head>

<body>

<h2>DataGrid Pagination Demo</h2>

<div>Click the page bar to change page number or page size.</div>

</div>

Pagination on

<option>bottom</option>

</select>

Style

<option>manual</option>

<option>links</option>

</select>

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"

url="datagrid2_getdata.php"

title="Load Data" iconCls="icon-save"

rownumbers="true" pagination="true">

<thead>

<tr>

<th field="itemid

<th field="productid

<th field="listprice

<th field="unitcost

<th field="attr1

<th field="status

</tr>

</thead>

</table>

function changeP(){

var dg = $('#tt');

dg.datagrid('loadData',[]);

dg.datagrid({pagePosition:$('#p-pos').val()});

dg.datagrid('getPager').pagination({

layout:['list','sep','first','prev','sep',$('#p-style').val(),'sep','next','last','sep','refresh']

});

}

</script>

</body>

</html>

jQuery EasyUI从入门到精通（14）DataGrid（4）

4、Server Side Pagination（服务器端分页），运行效果如下图所示。

jQuery EasyUI从入门到精通（14）DataGrid（4）

5、Client Side Pagination in DataGrid（数据表格的客户端分页），This sample shows how to implement client side pagination in DataGrid（这个例子展示了如何实现数据表格上的客户端分页）.

HTML基本结构

<!DOCTYPE html>

<html>

<head>

<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>

</head>

<body>

<h2>Client Side Pagination in DataGrid</h2>

This sample shows how to implement client side pagination in DataGrid.

<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

<th field="date

<th field="name

<th field="amount

<th field="price

<th field="cost

<th field="note

</tr>

</thead>

</table>

</body>

</html>

jQuery EasyUI从入门到精通（14）DataGrid（4）

6、Client Side Pagination in DataGrid（数据表格的客户端分页）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 = $.extend(true,[],state.allRows.slice(start, end));

return data;

}

var loadDataMethod = $.fn.datagrid.methods.loadData;

$.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);

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>

7、Client Side Pagination in DataGrid（数据表格的客户端分页），运行效果如下图所示。

jQuery EasyUI从入门到精通（14）DataGrid（4）

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。