jQuery分页插件-pagination.js的使用详解

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

使用方法

1 首先引入相关css、js文件：

<link rel="stylesheet" type="text/css" href="./common/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="./common/highlight.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./common/common.css" media="screen">
<link rel="stylesheet" type="text/css" href="./pagination.css" media="screen">
<script src="./common/highlight.min.js"></script>
<script src="./common/jquery.min.js"></script>
<script src="./jquery.pagination.js"></script>

上面必须的文件只有pagination.css，pagination.js,以及jquery

HTML很简单，只需要一个div给上相应的id或者class即可，如：

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

然后初始化插件

$("#pagination").pagination();

这样就完成了插件的使用，我们来看看

pagination()方法中有哪些参数

通过一个实例来看看如何使用：

$(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) {
                           //后台服务返回数据，重新加载数据
                        }  
           }); 
}

插件其它方法 自定义触发事件

// 自定义事件触发分页

    // 跳到第3页 
    $("#pagination").trigger('setPage', [2]);
    // 下一页
    $("#pagination").trigger('nextPage');
    // 上一页
    $("#pagination").trigger('prevPage');

Pagination使用简单，只需要设置参数和回调函数就可以用，通过回调函数处理 翻页触发的事件，比较灵活。大家可以尝试，具体哪些效果可以查看在线演示，需要学习研究可以下载