使用jQuery Pagination Plugin实现分页效果

最近使用分页这个基础效果较为频繁，而项目前端页面使用的是纯静态的HTML，本身以前写的JSP中的分页就用不成了；项目中也引入了Bootstrap，原本想使用Bootstrap中的分页样式，但发现其样式与这个项目的风格太不搭，再去修改其样式，还要控制其页码控制首页和末页不能再点击上一页和下一页，再麻烦了，索性就使用这个jQuery的分页插件配合着ajax来实现，使用事后感受还不错。

使用步骤

一、引入如下的js和css文件

<link rel="stylesheet" href="pagination.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagination.js"></script>

这个CSS文件就是jQuery Pagination Plugin 的样式文件，修改其样式仍是挺简单的，在这个文件里直接改就好了，由于我如今作的这个项目的界面风格很奇怪，因此我就在这里修改让分页插件的样式与项目统一，修改起来并非太难，class名也能够见名知意。

这里再提示一下插件的js文件引用必定要放在jQuery的js文件后面

二、在head标签中加入如下js代码

      function showPage(total,pageSize){
            //分页
            $('#news-Pagination-1').pagination(total, {      //总记录数
                items_per_page:pageSize,          //每页显示多少条记录
                  next_text:'下一页',
                  prev_text:'上一页',
                    num_edge_entries:2,  //链接分页主体的条数
                callback:handlePaginationClick
             });
      
          }
        function handlePaginationClick(new_page_index, pagination_container) {
            //清除以前的数据
            $('div[class=b3-third-one-today-right]').children().empty();
            show68(show68_pageSize,new_page_index+1);
            return false;
        }

show68 是我写的一个Ajax方法，须要改为项目实际须要的Ajax请求方法

在show68中最后一句须要在第一次使用时调用 showPage：

var j=1;

------------------

if(j==1){
        //第一次调用
        j++;
        showPage(data.total,pageSize);
}

 

参数配置：

total 总记录数

items_per_page 每页记录数（就是pageSize）

num_display_entries 最多显示的页码数 
next_text ‘下一页’显示的文字 
next_show_always 若是设置为false‘下一页’按钮只有在还能增长页码的状况下才显示 默认 true
prev_show_always 若是设置为false‘上一页’按钮只有在还能导航到前一页的状况下才显示 默认 true
prev_text ‘上一页’显示的文字

还有更多配置项能够查看  https://github.com/gbirke/jquery_pagination  

总来讲该插件只需传给它总记录数和每页显示的大小这两个参数便可。

注意：new_page_index这个参数对应的就是当前页，不须要咱们去指点当前是那一页，可是其值使用从0开始的（当前页码-1），后台咱们的分页方法通常是对应当前的页码的，因此传给后台须要+1。

callback的值是说明回调函数是哪一个，咱们能够在这个回调函数中去调用分页的ajax，这样效果就是每点击一页，就会去请求后台，是一次其实也不局限于必定要在回调函数中使用ajax，例如我遇到一个特别奇葩的需求，是一个将全部数据查回来放在js的一个数组中，而后分页就是对这个数组取对应的一个区间的数据，还好这个数据量并非很大，js有取数组指定一部分数据的方法，因此操做不算难性能也还能够，我就是在这个回调函数中取数组对应一部分的数据。

三、在body标签中加入如下格式的html代码

<div id="news-Pagination-1"></div>

写一个div来存放这个分页工具便可。

 最后看一看这个分页工具的效果图，这个默认的效果，就不看我作的项目中的效果了