最近有个项目涉及到了这个问题,以前不管是数据量多或者量少一直用的是后端的分页方式,从来没想过直接前端分页。偶然有这样的要求。就在网上翻阅了一些资料。下面是苏州网站制作小编搜集的一些信息,与大家分享之。
前端分页一般用于数据量较小的情况,一次请求把数据全部从后端请求回来。后端分页适用于数据量偏大时的情况,减小请求传输压力。前端需要将每页条数和当前页传给后端,后端根据条件查询出数据再传给前端,包括总条数、当前页、每页多少条数据等。
前端分页减少了后台的代码量。但却要牺牲读数据的速度。比如10万条记录,后台读出发给前台。前台再分析后分页,当然翻页可以直接使用而不需再访问后台。但是现在都讲究速度。如果5秒还出不来数据,也会让用户等不及。后台分页,虽然需要每次都访问数据。但一般,后端速度都比较不错,如果每页数据量都不大的情况下,速度就好多了。而且后端程序语言分页的功能相对于前端而言要更加的强大。
但是对于局部刷新的数据采用前端分页用户体验较好,比如评论列表,赞用户列表。当然也有2种模式结合的,比如微博列表加载数据,前10页是ajax获取分页数据,后10页是后端分页,在前10页上的a标签上也加上src地址利于蜘蛛抓取,但是禁用锚点链接功能改用click通过ajax获取数据。两个方案的应用场景不同,按你们的需求来实现吧。
推荐几个实用的前端分页插件
1、Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式。
2、jQuery Pagination分页插件
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
3、jQuery 分页插件 : jqPaginator
jqPaginator简洁、高度自定义的jQuery分页组件,适用于多种应用场景。关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了各种不同的场景。
对于一个前端而言,无论是新手还是老手,有一种东西从来都是实用的,那就是插件。上面几个web前端的分业插件是苏州网站制作认为不错的,仅供参考!