easyUI使用分页过滤器对数据进行分页操作

easyUI使用分页过滤器对数据进行分页操作

在后台管理系统中，由于数据量的庞大，我们经常需要用到easyui框架的分页工具。在本文章中，使用了分页过滤器进行分页的方法，示例如下：

代码如下：
HTML

    <table id="wu-datagrid-stuInfo" class="easyui-datagrid" toolbar="#wu-toolbar-stuInfo">
    table>

JS代码

/**
 * 获取所有学员信息
 */
function show() {
    $.ajax({
        url: httpurl + '/jsrAdminWeb/selectAll',//连接后台接口
        type: 'post',
        dataType: 'json',
        contentType: "application/json",
        async: false, //false 同步

        success: function (result) {
            var stuData = result.data;
            getData();//铺页面（列）
            $("#wu-datagrid-stuInfo").datagrid("loadData", stuData);//加载数据表格
        }
    });
}

/**
 * 前台铺值
 */
function getData() {
    $("#wu-datagrid-stuInfo").datagrid({
        loadFilter: pagerFilter,//调用分页过滤器方法
        checkOnSelect: true,//当用户点击行的时候该复选框就会被选中或取消选中
        autoRowHeight: false,//自定义设置行的高度，根据该行的内容
        rownumbers: true,//显示一个行号列
        singleSelect: false,//可以一次选择多行
        // multiSort: true,//允许多列排序
        fit: true,
        columns: [[{
            field: 'id', //每一列的名字
            width: '50',
            title: 'ID',
            checkbox: true
        }, {
            field: 'stuName',
            title: '姓名',
            width: '100',
            align: 'center'
        }, {
            field: 'stuSex',
            title: '性别',
            width: '100',
            align: 'center'
        }, {
            field: 'stuAge',
            title: '年龄',
            width: '100',
            align: 'center'
        }, {
            field: 'stuIntroduce',
            title: '介绍',
            width: '700',
            align: 'center'
        }, {
            field: 'createTime',
            title: '创建时间',
            width: '130',
            align: 'center'
        }
        ]],
        idField: 'id',
        loadMsg: 'Processing, please wait …',
        pagination: true//将分页设置为true
    });
}

分页过滤器方法（写在js代码中）：
注意：从后台取到的数据是全部的学生信息，这段代码，复制到JS代码里面就可以实现。

/**
 * 分页过滤器
 * @param data 全部数据
 * @returns {*}
 */
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);
    }
    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
    var end = start + parseInt(opts.pageSize);
    data.rows = (data.originalRows.slice(start, end));
    return data;
}

以上就是easyui使用分页过滤器实现前台数据分页的方法。如有错误，还望指正，谢谢。