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

序

为什么叫前端分页工具？因为实在想不出一个好名字，如果想更贴切的理解这个工具，就应该从业务的角度来看

生意是这样的。有一条数据从后台传输到前台。因为数据量小，传输后可以直接显示，但是=。=所谓数据量不大，最多能达到几百或几千。不可能全部显示，所以需要分页

常规分页是使用Ajax，通过将页面偏移量转移到后台，在后台查询数据库，然后返回数据，可以实现无刷新分页，获取最新数据

前端分页

优点：一次传输数据，避免用户重复请求服务器，降低网络带宽、服务器调度压力、数据库查询和缓存查询压力

缺点：除非用户重新请求数据，否则无法实时更新新数据

过程

起初，我不想造轮子，但想尽快完成。所以我找了很久的BootstrapTable工具，找到了一个BootstrapTable。这个插件非常强大。除了常规方式的分页，我还可以为前端分页指定数据(json)。

但是，这是表分页，也就是说，如果不是表，也没用，只是……我的业务不是表.然后只能看到插件源代码被修改了，修改后面目全非，回到厕所想了个更好的办法，就删了…

解决方法：先想想分页是为了什么。显示你想看的页面，隐藏你不想看的页面。可以，可以使用CSS的显示属性

版本

引导-3.3.0

jQuery-1.11.3

密码

Java Script语言

脚本类型='text/javascript'//上一页函数上一个(){//当前页-1 new _ page=Parseint($(' # current _ page ').val())-1；转到页面（新页面);}//下一页函数next(){//当前页1 new _ page=Parseint($(' # current _ page ').val())1；转到页面（新页面);}//跳转某一页函数转到页面(页码){$(').page_link[longdesc=' page_num ']').父项()。addClass('active ').兄弟姐妹('。活动')。移除CLaSS(' active ')；//获取隐藏域中页数大小（每页多少条数据)var show _ per _ page=Parseint($(' # show _ per _ page ').val())；//得到元素从哪里开始的片数（点击页* 页大小)如点击第5页，5条/页。则开始为25 start _ from=page _ num * show _ per _ page；//得到结束片的元素数量，如果开始为25,5条/页，则结束为30 end _ on=start _ from _ show _ per _ page；//隐藏所有子差异元素的内容，显示具体片数据，如显示25~30美元(' # datas ').儿童()。css('显示'，'无').切片（开始_开始，结束_开始)。css('display '，' inline-block ')；//每页显示的数目var show _ per _ page=10//获取总数据的数量var _ number _ of _ items=$(' # topics ').儿童()。size()；//计算页数var _页数=数学。ceil(items _ number _ of _ items/show _ per _ page)；//在页数区域内则做页偏移if((page _ num=2)(page _ num=(num _ of _ page-3)){//生成分页-上一页var page _ info=' lia class=' previous _ link ' href=' JavaScript : previous()；/a/李；var p=page _ numvar I=page _ num-2；var j=page _ num 2；//生成分页-前2页while(page _ num I){ page _ info=' lia class=' page _ link ' href=' JavaScript : go _ to _ page(' I ')' long=' I ' '(I 1)'/a/Li '；我；}//生成分页-当前页page _ info=' lia class=' page _ link ' href=' JavaScript : go _ to _ page '(page _ num ')' long=' page _ num ' '(page _ num 1)'/a/Li '；//生成分页-后2页while(p j){if(p==页数){ break } page _ info=' lia class=' page _ link ' href=' JavaScript : go _ to _ page('(p ^ 1)')' long desc=' '(p ^ 1)' ' '(p ^ 2)'/a/Li '；p；}//生成分页-下一页page _ info=' lia class=' next _ link ' href=' JavaScript : next()；/a/李；//加载分页$('.分页')。html(page _ info)；$('.page_link[longdesc=' page_num ']').父项()。addClass('active ').兄弟姐妹('。活动')。移除CLaSS(' active ')；}else{ //否则不偏移//激活某一页，使得显示某一页$('.page_link[longdesc=' page_num ']').父项()。addClass('active ').兄弟姐妹('。活动')。移除CLaSS(' active ')；}//更新隐藏域中当前页$(“# current _ page”).val(page _ num)；}$(function(){//每页显示的数目var show _ per _ page=10//获取话题数据的数量var _ number _ of _ items=$(' # data ').儿童()。size()；//计算页数var _页数=数学。ceil(items _ number _ of _ items/show _ per _ page)；//设置隐藏域默认值$(“# current _ page”).val(0)；$(“# show _ per _ page”).val(显示每页);//生成分页-上一页var page _ info=' lia class=' previous _ link ' href=' JavaScript : previous()；/a/李；var current _ link=0；//生成分页-页数而(页数_ current _ link){ if(current _ link==5){ break；} page _ info=' lia class=' page _ link ' href=' JavaScript : go _ to _ page(' current _ link ')' long=' current _ link ' '(current _ link 1)'/a/Li；current _ link}//生成分页-下一页page _ info=' lia class=' next _ link ' href=' JavaScript : next()；/a/李；//加载分页$('.分页')。html(page _ info)；//生成分页-左侧总数$('#data-total-page ').html(显示每页)条/页，共'页数'页')//激活第一页，使得显示第一页$(' #数据分页Li ').等式(1)。添加CLaSS(' active ')；//隐藏该对象下面的所有子元素$(' # data ').儿童()。css('display '，' none ')；//显示第n(每页显示)元素$(' # data ').儿童()。切片(0,每页显示)。css('display '，' inline-block ')；});/scriptHTML

！-数据- div id='datas '？phpforeach($ data as $ v){ echo ' div class=' data ' div class=' data-info ' div class=' data-name ' ' $ v[' name ']'/div class=' data-blog ' ' $ v[' blog ']'/div/div/div '；}?/div！-分页-输入类型='隐藏' id='当前页面'值='0 '输入类型='hidden' id='show_per_page '值=' 0 ' div id=' data-page-info ' div id=' data-total-page '/div div id=' data-paging ' ul class=' paging '/ul/div/div效果如下

动态切换

以上所述是小编给大家介绍的基于引导程序和jQuery构建前端分页工具实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！