使用jQuery Pagination Plugin实现分页效果

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

使用步骤

1、引入以下的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文件后面

2、在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有取数组指定一部分数据的方法，所以操作不算难性能也还可以，我就是在这个回调函数中取数组对应一部分的数据。

3、在body标签中加入以下格式的html代码

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

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

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

 

转载于:https://www.cnblogs.com/lz2017/p/8018475.html