MiniUI前台分页,假分页实现源码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MiniUI前台分页,假分页实现源码相关的知识,希望对你有一定的参考价值。

背景

对于数据较少,无需后台分页的需求,可使用以下解决方案


方案

MiniUI提供了监听事件,特别方便即可实现。


源码

mini.parse();
var grid = mini.get("datagridTable");
        // 获取所有数据和总记录数 { total: 100, data: [...] }
        var dataResult = {};
        dataResult.total = ret.length;
        dataResult.data = ret;
        // 监听分页前事件,阻止后自行设置当前数据和分页信息
        grid.on("beforeload", function (e) {
            e.cancel = true;
            var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
            fillData(pageIndex, pageSize, dataResult, grid);
        });
        // 第一次设置
        fillData(0, grid.getPageSize(), dataResult, grid);
        
// 分页填充细节处理
function fillData(pageIndex, pageSize, dataResult, grid) {
    
    var data = dataResult.data, totalCount = dataResult.total;

    var arr = [];
    var start = pageIndex * pageSize, end = start + pageSize;
    for (var i = start, l = end; i < l; i++) {
        var record = data[i];
        if (!record) continue;
        arr.push(record);
    }
    

    grid.setTotalCount(totalCount);
    grid.setPageIndex(pageIndex);
    grid.setPageSize(pageSize);

    grid.setData(arr);
}

结束

以上代码,填充后台数组json即可完成前台分页。


以上是关于MiniUI前台分页,假分页实现源码的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyui datagrid 分页实现

假分页

存储过程实现真分页效果

JavaWeb分页的实现

知了堂学习笔记JSP页面数据分页实现——分页概念以及主流数据库的分页查询

java中如何实现分页显示