[JavaScript]基于Bootstrap+jQuery构建前端分页工具

前言

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

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

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

前端分页
优点：一次传输数据，避免用户反复请求服务器，减少网络带宽、服务器调度压力、数据库查询、缓存查询压力
缺点：有新数据无法实时更新，除非用户重新请求数据

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

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

解决办法：先思考分页是为了什么？呈现想看的页面，隐藏不想看的。没错，可以利用CSS的display属性

版本

Bootstrap-3.3.0
jQuery-1.11.3

代码
JavaScript

<script type="text/javascript">

    //上一页
    function previous(){
   
        //当前页-1
        new_page = parseInt($('#current_page').val()) - 1;
        go_to_page(new_page);
    }
    //下一页
    function next(){
   
        //当前页+1
        new_page = parseInt($('#current_page').val()) + 1;
        go_to_page(new_page);
    }
    //跳转某一页
    function go_to_page(page_num){
   
        $('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
        //获取隐藏域中页数大小（每页多少条数据）
        var show_per_page = parseInt($('#show_per_page').val());
        //得到元素从哪里开始的片数（点击页 * 页大小）如点击第5页，5条/页。则开始为25
        start_from = page_num * show_per_page;