html假分页实现方法,MiniUI前台分页，假分页实现源码

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

发布时间：2020-06-09 13:23:39

来源：51CTO

阅读：3924

作者：沫沫金

背景

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

方案

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 

var record = data[i];

if (!record) continue;

arr.push(record);

}

grid.setTotalCount(totalCount);

grid.setPageIndex(pageIndex);

grid.setPageSize(pageSize);

grid.setData(arr);

}

结束

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