第一次写技术方面的文章,有点忐忑,总怕自己讲的不对误导别人。但是万事总有个开头,有不足错误之处,请各位读者老爷指出。
言归正传,最近刚进新公司,上头要求我先熟悉熟悉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如此频繁的请求操作,是不是也值得商榷呢?这也导致了大量的重复对数据库的查询操作,因为我们要根据页码来获取不同区间的数据集。
不知道大家有没有什么好的方法呢?欢迎指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。