分页的处理

使用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代码模块

    效果图


    效果图

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

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

    分页的处理_第1张图片
    例子

    填坑!

    但是因为第二次调用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;开始页数要小于总页数,所以要保持页数的准确性,以上!

    你可能感兴趣的:(分页的处理)