1、Custom DataGrid Pager（自定义数据表格分页），You can append some buttons to the standard datagrid pager bar（你可以附加一些按钮在标准的数据表格分页器上）.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Custom DataGrid Pager - 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>Custom DataGrid Pager</h2> <p>You can append some buttons to the standard datagrid pager bar.</p> <div style="margin:20px 0;"></div> <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:'itemid',width:80">Item ID</th> <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:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:240">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table> <script type="text/javascript"> $(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>
2、Custom DataGrid Pager（自定义数据表格分页），运行效果如下图所示。
3、Server Side Pagination（服务器端分页），Click the page bar to change page number or page s足毂忍珩ize.<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>DataGrid Pagination - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/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://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body> <h2>DataGrid Pagination Demo</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"> </div> <div>Click the page bar to change page number or page size.</div> </div> <p> Pagination on <select id="p-pos" onchange="changeP()"> <option>bottom</option> <option>top</option> <option>both</option> </select> Style <select id="p-style" onchange="changeP()"> <option>manual</option> <option>links</option> </select> </p> <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" width="80">Item ID</th> <th field="productid" width="120">Product ID</th> <th field="listprice" width="80" align="right">List Price</th> <th field="unitcost" width="80" align="right">Unit Cost</th> <th field="attr1" width="200">Attribute</th> <th field="status" width="60" align="center">Stauts</th> </tr> </thead> </table> <script type="text/javascript"> 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>
4、Server Side Pagination（服务器端分页），运行效果如下图所示。
5、Client Side Pagination in DataGrid（数据表格的客户端分页），This sample shows how to implement client side pagination in DataGrid（这个例子展示了如何实现数据表格上的客户端分页）.HTML基本结构<!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> </body></html></html>
6、Client Side Pagination in DataGrid（数据表格的客户端分页）Javascript代码：<s艘早祓胂cript> (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（数据表格的客户端分页），运行效果如下图所示。
