jq easyui数据网络的分页历程

2024年2月28日 216次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞