jq easyui数据网络的分页过程

2024年1月24日 218次阅读 来源: cucumber

第一次写技术方面的文章，有点忐忑，总怕自己讲的不对误导别人。但是万事总有个开头，有不足错误之处，请各位读者老爷指出。

言归正传，最近刚进新公司，上头要求我先熟悉熟悉easyui这个组件库。在涉及到datagrid组件的分页功能时，遇到了一点问题。

我们在处理分页时，通常有两种方式，前端分页和后台分页。前端分页会将后台数据一次性全部查询返回，然后在前端存储处理。这样的方式缺点很明显，如果数据量非常大，存储在前端显然是一种非常不明智的方式，对于性能有明显影响。

那我们来看看easyui处理分页的方式。

  <table  class="easyui-datagrid" title="学生信息" style="width:700px;height:250px;"
    data-options="singleSelect:true,collapsible:true,url:'http://localhost:3000/ge',method:'get',pagination:true" toolbar="#tool"> 
    <thead>
        <tr>
            <th data-options="field:'name',width:150,align:'center'">姓名</th>
            <th data-options="field:'num',width:150,align:'center'">学号</th>
            <th data-options="field:'school',width:150,align:'center'">学校</th>
            <th data-options="field:'major',width:150,align:'center'">专业</th>
            <th data-options="field:'xuewei',width:100,align:'center'">操作</th>
        </tr>
    </thead>
</table>

以上是页面上的代码，当设置pagination属性为true时，easyui会自动加上一个分页器。这个分页器，当页面加载或者是用户改变当前页面时，easyui会以ajax的方式发送给后台两个参数:page和row。page是指当前页码，row指一页显示多少条信息。

我们这边用nodejs搭建一个简单的web服务器，来看看后台是怎么进行分页的。定义一个json对象，模拟一下数据库里的数据。由于数据较多，这边不予展示。当easyui发送请求过来时，我们先获取它带的参数，这两个参数是以query方式带过来的。

var page = req.query.page;//page当前页
var row = req.query.rows;//页面最多几条
var start = (page-1)*row;//查询起始位置
var end = page*row-1;//查询结束位置

根据拿到的page和row两个值确定该页面返回的数据。返回的数据必须是符合easyui要求的json数据，格式如下:


{"total":length,"rows":returnArray}

必须带有total属性，属性值为总共的数据条数，returnArray是这一页的数据内容，以数组对象的形式返回。返回前端后，easyui会自动帮你把数据填充。这样一来，我们就理解了这个分页的原理。

但是问题来了，easyui每一次改变当前页码，都会向后台发起一次请求。我们知道，在web项目中，大量的http请求会影响性能，easyui如此频繁的请求操作，是不是也值得商榷呢？这也导致了大量的重复对数据库的查询操作，因为我们要根据页码来获取不同区间的数据集。

不知道大家有没有什么好的方法呢？欢迎指正。

    原文作者：cucumber
    原文地址: https://segmentfault.com/a/1190000005675113
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞