easyUI datagrid 前端假分页

最新推荐文章于 2021-07-21 15:04:37 发布

原创最新推荐文章于 2021-07-21 15:04:37 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了easyUI datagrid的前端假分页实现，讲解了假分页的工作原理，并提供了服务器端返回数据的正确格式。通过设置特定参数和处理数据刷新，可以实现假分页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

datagrid有两种分页方式，真分页和假分页。

所谓真分页，就是真的每次只获取一张分页的数据。

所谓假分页，就是将所有数据全部获取下来，然后利用其分页控件进行分页。

下面具体说说假分页：

1、datagrid有些参数需要设置：

$("#dg").datagrid({    pageNumber:1,    pagination: true,//分页控件     rownumbers: true,//显示行号    pageSize: 10,    pageList: [10, 15, 50, 100],    loader: myLoader, //前端分页加载函数    ……

2、加载函数：

function myLoader(param, success, error) {    var that = $(this);    var opts = that.datagrid("options");    if (!opts.url) {        return false;    }    var cache = that.data().datagrid.cache;    if (!cache) {        $.ajax({            type: opts.method,            url: opts.url,            data: param,            dataType: "json",            success: function (data) {                that.data().datagrid['cache'] = data;                success(bulidData(data));            },            error: function () {                error.apply(this, arguments);            }        });    } else {        success(bulidData(cache));    }    function bulidData(data) {        debugger;        var temp = $.extend({}, data);        var tempRows = [];        var start = (param.page - 1) * parseInt(param.rows);        var end = start + parseInt(param.rows);        var rows = data.rows;        for (var i = start; i < end; i++) {            if (rows[i]) {                tempRows.push(rows[i]);            } else {                break;            }        }        temp.rows = tempRows;        return temp;    }}

照抄可也，只要 jQuery easyui 1.2.6+

3、服务器端获取数据，格式一定要是：

｛"total":106,"rows":[{},{},{}.....]｝，且rows.length的长度应该等于total的值。显然，rows就是具体的数据。

如此，分页可成矣，只不过，它是假的。

4、如果需要刷新数据，务必清除缓存：

$("#dg).data().datagrid.cache = null;$("#dg).datagrid("reload");

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow