Easyui实现前端分页

#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;  
    }

#3效果图