Jquery Pagination分页插件使用

JqueryPagination是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了。

准备工作

下载jquery.min.js
下载jquery.pagination.js
下载pagination.css

开始敲代码

第一步，引入刚刚下载的三个文件

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

第二步，在页面结构写一个有id属性以及class="pagination"的div

<div id="Pagination" class="pagination"></div>

第三步，初始化

    $(function() {
        $("#Pagination").pagination(25, {
        num_edge_entries: 0,
        num_display_entries: 5,
        current_page: 1,
        callback: function (page) {
            console.log(page);
        },
        items_per_page:10,
        prev_text: '上一页',
        next_text: '下一页',
        prev_show_always: true,
        next_show_always: true
    });
    })

或者：

$(function () {
　　　　var pageCount=50;  //分页总数量
      // $("#pagination").pagination(pageCount); //简单初始化方法

        $("#pagination").pagination(pageCount,    //分布总数量，必须参数
                 {
　　　　　　　　　　callback: PageCallback,  //PageCallback() 为翻页调用次函数。
                  prev_text: "« 上一页",
                  next_text: "下一页 »",
                  items_per_page:10,
                  num_edge_entries: 2,       //两侧首尾分页条目数
                  num_display_entries: 10,    //连续分页主体部分分页条目数
                  current_page: 0,   //当前页索引
　　　　　　　　　link_to: "?id=__id__"  //分页的js中会自动把"__id__"替换为当前的数。0　
　　　 });

 });

function PageCallback(page_index,jq)
{
     $.ajax({
                type: "POST",
                dataType: "text",
                url: '后台处理地址',  //提交到一般处理程序请求数据
                data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,  //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
                success: function(data) {
                           //后台服务返回数据，重新加载数据
                        }
           });
}

完成。

使用方法

跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);

参数

参数名	描述	参数值
maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"..."
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	默认无执行效果