基于Bootstrap和jQuery构建前端分页工具实例代码

前言

为啥名字叫【前端分页工具】?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看

业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=。=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页

常规的分页是利用Ajax,通过传页偏移量到后台后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的

前端分页

优点:一次传输数据,避免用户反复请求服务器,减少网络带宽、服务器调度压力、数据库查询、缓存查询压力

缺点:有新数据无法实时更新,除非用户重新请求数据

过程

刚开始我不希望造轮子,想尽快完成,于是找了很久Bootstrap的工具,找到了一个BootstrapTable,这个插件很强大,除了可以使用常规的方式分页,还可以指定数据(json),进行前端分页

但是,这个是表格分页,也就是说,如果不是表格那就没用了,刚好…我的业务就不是表格..那么只能看插件源码修改了,改的面目全非后,上个厕所回来,想到了更好的办法,于是删除

解决办法:

先思考分页是为了什么?呈现想看的页面,隐藏不想看的。没错,可以利用CSS的display属性

版本

Bootstrap-3.3.0

jQuery-1.11.3

代码

JavaScript

rush:js;">

HTML

rush:js;">
PHP foreach($data as $v) { echo '
'; } ?>

效果如下

动态切换

以上所述是小编给大家介绍的基于Bootstrap和jQuery构建前端分页工具实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...