摘要:在涉及到组件的分页功能时,遇到了一点问题。由于数据较多,这边不予展示。返回的数据必须是符合要求的数据,格式如下必须带有属性,属性值为总共的数据条数,是这一页的数据内容,以数组对象的形式返回。
第一次写技术方面的文章,有点忐忑,总怕自己讲的不对误导别人。但是万事总有个开头,有不足错误之处,请各位读者老爷指出。
言归正传,最近刚进新公司,上头要求我先熟悉熟悉easyui这个组件库。在涉及到datagrid组件的分页功能时,遇到了一点问题。
我们在处理分页时,通常有两种方式,前端分页和后台分页。前端分页会将后台数据一次性全部查询返回,然后在前端存储处理。这样的方式缺点很明显,如果数据量非常大,存储在前端显然是一种非常不明智的方式,对于性能有明显影响。
那我们来看看easyui处理分页的方式。
姓名 | 学号 | 学校 | 专业 | 操作 |
---|
以上是页面上的代码,当设置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如此频繁的请求操作,是不是也值得商榷呢?这也导致了大量的重复对数据库的查询操作,因为我们要根据页码来获取不同区间的数据集。
不知道大家有没有什么好的方法呢?欢迎指正。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86347.html
摘要:在涉及到组件的分页功能时,遇到了一点问题。由于数据较多,这边不予展示。返回的数据必须是符合要求的数据,格式如下必须带有属性,属性值为总共的数据条数,是这一页的数据内容,以数组对象的形式返回。 第一次写技术方面的文章,有点忐忑,总怕自己讲的不对误导别人。但是万事总有个开头,有不足错误之处,请各位读者老爷指出。 言归正传,最近刚进新公司,上头要求我先熟悉熟悉easyui这个组件库。在涉及到...
摘要:最近在做手机端,发现下拉刷新和上拉加载的控件很少而且自我感觉不好用,比如之类然后自己写了个懒加载的,也很简单,最基础的代码不喜勿喷,但蛮实用的手机端懒加载分页用之前先引用下这里的表示距离底部像素触发,可自行调节第页这里放你的分页代码这是刷 最近在做手机端,发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用,比如iscroll之类…… 然后自己写了个懒加载的,也很简单,最基础的代码【...
阅读 3497·2021-11-18 10:02
阅读 3061·2019-08-29 18:34
阅读 3361·2019-08-29 17:00
阅读 396·2019-08-29 12:35
阅读 699·2019-08-28 18:22
阅读 1854·2019-08-26 13:58
阅读 1636·2019-08-26 10:39
阅读 2654·2019-08-26 10:11