#1参考代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <table style="width:100%;height:100%" id="dgPartPurchase" toolbar="#partPurchase-toolbar" idField="part_pc_id" rownumbers="true" fitColumns="true" singleSelect="true" pagination="true" pageSize="10"></table> <div id="partPurchase-toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dgPartPurchase').edatagrid('addRow')">增加</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dgPartPurchase').edatagrid('destroyRow')">删除</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dgPartPurchase').edatagrid('saveRow')">保存</a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dgPartPurchase').edatagrid('cancelRow')">取消</a> </div> <script> $('#dgPartPurchase').edatagrid({ loadFilter : partPurchasePagerFilter, loadMsg : "正在加载数据,请稍等...", striped : true, url: 'getPartPurchase', saveUrl: 'savePartPurchase', updateUrl: 'updatePartPurchase', deleteUrl: 'deletePartPurchase', columns:[[{ field : 'part_pc_id', editor : 'text', title : '编号', hidden : true },{ field : 'part_id', title : '配件名称', width : '10%', formatter:function(value, row){ return row.part_name }, editor : { type : 'combobox', options : { url : 'getPartInfo', valueField : "part_id", textField : "part_name", editable : false, required : true }, } },{ field : 'part_pc_count', title : '入库数量', width : '10%', editor : { type : 'numberbox', options : { required : true, precision : 0, min : 0 } } },{ field : 'part_pc_date', title : '入库日期', width : '15%', editor : { type : 'datetimebox', options : { required : true } } },{ field : 'remark', title : '备注', width : '65%', editor : 'text' }]] }); 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>
#2要点
*1)table添加属性
pagination="true" pageSize="10"
*2)datagrid添加属性
loadFilter : partPurchasePagerFilter
*3)datagrid属性的值
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; }