使用jQuery Pagination Plugin实现分页效果

日常操作，导入源地址:https://github.com/josecebe/twbs-pagination
这个插件去写分页，十分简单，可以照搬它的模板去写
这是他的js代码模块

 $('#pagination-demo').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
  });

这是他的html代码模块

<ul id="pagination-demo" class="pagination-sm"></ul>

效果图

效果图

这里只解释一部分的参数：
totalPages：分页的总页数
startPage：设置默认开始页数，不设置则默认为1
visiblePages：设置在分页板一共显示多少个分页块
initiateStartPageClick：设置是否初始化时是否触发onPageClick函数，默认为true，为触发
onPageClick：点击分页按钮时就会触发的函数，默认为一初始化就执行
first：设置first的值，first部分看上面的效果图，下面的一样
last: 同上
prev : 同上
next：同上

下面的一个例子，是基于上面的模板而去进行的小修改，这个例子是在发送Ajax请求的时候去初始化分页，然后在拿到接口返回来的总分页数据的时候，就可以填入totalPages参数后.

例子

填坑！

但是因为第二次调用twbsPagination的话，它不会重新去渲染分页组件，所以想要实现根据数据的变化，而实现分页数也动态的变化的话，要将其destroy掉，再去重新调用，使其重新渲染。（在删除最后一页的第一条数据时，效果比较明显）
所以

function loadPageData(page) {
      $('tbody').fadeOut();
      $.get('/admin/api/get_comments.php',{page:page},function (res) {
        //page是当前页面的分页数 判断分页数是否大于服务端响应过来的分页数，
        //如果大于的话，重新加载分页组件，保证组件的分页数的准确性
        if (page>res.total_page) {
          loadPageData(res.total_page)
          //return掉，不执行下面的代码
          return
        }
        //destroy掉之前的分页组件，这样才可以实现动态的组件生成
        $('#pagination-demo').twbsPagination('destroy')
        $('#pagination-demo').twbsPagination({
          first : '«',
          last : '»',
          prev : '上一页',
          next : '下一页',
          //设置开始的页数，因为每一次调用都会初始化，且开始页数是默认为1，
          //要是不设置的话，就会每次自动跳到1，不管点击了哪个页数
          startPage : page,
          totalPages: res.total_page,
          visiblePages: 5,
          //第一次初始化时就会执行
          //关掉下面那边函数以初始化就执行
          initiateStartPageClick:false,
          onPageClick: function (event, page) {
            loadPageData(page);
          }
        });
        var html = $('#comments_tmpl').render({comments:res['comments']});
        $('tbody').fadeIn(function () {
          //将数据渲染到页面上
          $(this).html(html);
        });
        currentPage = page;
      })
    }

总的来说，
二次调用不会再去渲染，所以要记得destroy；开始页数要小于总页数，所以要保持页数的准确性，以上！