easyUI前后台分页代码实现

一、后台分页

（1）客户端代码：

var dg = $('#table');
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
        });
    getData();
},
    pageList: [10, 20, 30, 50],         //可以设置每页记录条数的列表
    beforePageText: '第',                 //页数文本框前显示的汉字
    afterPageText: '页，共 {pages} 页',
    displayMsg: '当前显示 {from} - {to} 条记录, 共 {total} 条记录'
});
pagenumber = opts.pageNumber; //pageNumber为datagrid的当前页码
pagesize = opts.pageSize;             //pageSize为datagrid的每页记录条数

function getData(){
    $.ajax({
        url : testUrl,
        type : 'post' ,
        data :{"pagenumber":pagenumber,"pagesize":pagesize},
       dataType : 'json' ,
        cache : false ,
        success : function(data){
            $("#table").datagrid("loadData",data);
        }
    })
}        

（2）服务端代码：

public class PageServer {
    string page = "1";
    string rows = "10";

    int intPage = Integer.parseInt((page == null || "0".equals(page)) ? "1" : page);
    int number = Integer.parseInt((rows == null || "0".equals(rows)) ? "10" : rows);
    int start = (intPage - 1) * number;

    String querySQL = "select * from T_userInfo order by birthdate limit "+ start + "," + number + ";";

    //do some thing and return data......
}

　

　　二、前台分页

$("table").datagrid({
	data : gridData,
	loadFilter: pagerFilter,
	height: $(document).height()*0.87,
	striped: true,
	selectOnCheck: true,
	pagination: true,
	pageSize:15,
	pageList:[10,15,20,30,40,50],
	onLoadSuccess: function (data) {
		if (data.total == 0) {
			$(this).datagrid('appendRow',
			{username: '<div style="text-align:center;color:red">没有查询到相关记录！</div>' }).datagrid('mergeCells',{index: 0, field: 'alarmCode', colspan: 8 });
			var pager = $(this).datagrid('getPager');
				$(pager).pagination({
					displayMsg: '当前显示 0 条记录   共 0 条记录',
				})
			}
		},
		columns: [
			[{
				field: 'userName',
				title: '用户名',
				width: '10%',
				align: 'center'
			}, {}
			......
			}]

	})
}

function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
            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);
        }
        if(opts.pageNumber==0){
            opts.pageNumber+=1;
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }