EasyUI表格DataGrid假分頁及獲取表格數據
阿新 • • 發佈：2018-11-10
lda func type 分頁控件 lin jquer 就是 java size
假分頁就是將所有要顯示的數據全部查詢出來後，進行前臺的分頁，適合數據量較小的Web項目
在假分頁的情況下獲取所有數據：
var totalData = $("#datagrid").datagrid(‘getData‘);
var rows = totalData.originalRows;
完整的Demo：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css"href="jquery-easyui-1.5.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script> <title></title> <script> $(document).ready(function() { $("#datagrid").datagrid({ pagination:true, //分頁控件 pageSize: 3, pageList: [3, 6, 9], loadFilter: partPurchasePagerFilter }).datagrid(‘loadData‘, getData()); $("#btn").click(function(){ //獲取假分頁的所有數據 var totalData = $("#datagrid").datagrid(‘getData‘); var rows = totalData.originalRows; $.each(rows,function(i,value){ alert("所有行 "+value.stuNo+" "+value.stuName+" "+value.stuSex); }) //獲取假分頁的當前頁數據 var currentRows = $("#datagrid").datagrid(‘getRows‘); $.each(currentRows,function(i,value){ alert("當前頁 "+value.stuNo+" "+value.stuName+" "+value.stuSex); }) }); }); function getData(){ var rows = []; for(var i=1; i<=10; i++){ rows.push({ stuNo: 2230+i, stuName: ‘Name‘+i, stuSex: ‘男‘ }); } return rows; } function partPurchasePagerFilter(data) { if(typeof data.length == ‘number‘ && typeof data.splice == ‘function‘) { data = { total: data.length, rows: data } } var dg = $(this); //返回屬性對象 var opts = dg.datagrid(‘options‘); //返回頁面對象 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‘, data); } }); if(!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } </script> </head> <body> <table data-options="fitColumns:true,rownumbers:true" id="datagrid" class="easyui-datagrid" title="學生"> <thead> <tr> <th data-options="field:‘stuNo‘,width:100">學號</th> <th data-options="field:‘stuName‘,width:100"> 姓名 </th> <th data-options="field:‘stuSex‘,width:100">性別</th> </tr> </thead> </table> <button id="btn">獲取數據</button> </body> </html>
EasyUI表格DataGrid假分頁及獲取表格數據