easyUI 数据表格客户分页

Posted Wit_tang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyUI 数据表格客户分页相关的知识，希望对你有一定的参考价值。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery.min.js"></script>
  10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Client Side Pagination in DataGrid</h2>
  14. <p>This sample shows how to implement client side pagination in DataGrid.</p>
  15. <div style="margin:20px 0;"></div>
  17. <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
  18. rownumbers:true,
  19. singleSelect:true,
  20. autoRowHeight:false,
  21. pagination:true,
  22. pageSize:10">
  23. <thead>
  24. <tr>
  25. <th field="inv" width="80">Inv No</th>
  26. <th field="date" width="100">Date</th>
  27. <th field="name" width="80">Name</th>
  28. <th field="amount" width="80" align="right">Amount</th>
  29. <th field="price" width="80" align="right">Price</th>
  30. <th field="cost" width="100" align="right">Cost</th>
  31. <th field="note" width="110">Note</th>
  32. </tr>
  33. </thead>
  34. </table>
  35. <script>
  36. function getData()
  37. var rows = [];
  38. for(var i=1; i<=800; i++)
  39. var amount = Math.floor(Math.random()*1000);
  40. var price = Math.floor(Math.random()*1000);
  41. rows.push(
  42. inv: 'Inv No '+i,
  43. date: $.fn.datebox.defaults.formatter(new Date()),
  44. name: 'Name '+i,
  45. amount: amount,
  46. price: price,
  47. cost: amount*price,
  48. note: 'Note '+i
  49. );
  51. return rows;
  54. function pagerFilter(data)
  55. if (typeof data.length == 'number' && typeof data.splice == 'function') // is array
  56. data =
  57. total: data.length,
  58. rows: data
  61. var dg = $(this);
  62. var opts = dg.datagrid('options');
  63. var pager = dg.datagrid('getPager');
  64. pager.pagination(
  65. onSelectPage:function(pageNum, pageSize)
  66. opts.pageNumber = pageNum;
  67. opts.pageSize = pageSize;
  68. pager.pagination('refresh',
  69. pageNumber:pageNum,
  70. pageSize:pageSize
  71. );
  72. dg.datagrid('loadData',data);
  74. );
  75. if (!data.originalRows)
  76. data.originalRows = (data.rows);
  78. var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
  79. var end = start + parseInt(opts.pageSize);
  80. data.rows = (data.originalRows.slice(start, end));
  81. return data;
  84. $(function()
  85. $('#dg').datagrid(loadFilter:pagerFilter).datagrid('loadData', getData());
  86. );
  87. </script>
  88. </body>
  89. </html>

以上是关于easyUI 数据表格客户分页的主要内容，如果未能解决你的问题，请参考以下文章

easyUI数据表格datagrid之分页

Jquery EasyUI datagrid后台数据表格生成及分页详解

easyui的pagination分页可以不用datagrid吗

EasyUI基础入门之Pagination(分页)

为啥easyui-datagrid分页控件把所有的都遮住了？

为啥easyui-datagrid分页控件把所有的都遮住了？