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

2024-10-13 18:35:30

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>

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>

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>