首页 > 代码库 > JqueryPagination 分页插件使用说明

JqueryPagination 分页插件使用说明

2024-07-18 16:12:21   222人阅读

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

　　

1 首先引入相关js文件：

<link href="http://www.mamicode.com/Scripts/pagination.css" rel="stylesheet" type="text/css" /><script src="http://www.mamicode.com/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> // 个人发现插件对1.4版不支持<script src="http://www.mamicode.com/Scripts/jquery.pagination.js" type="text/javascript"></script>

 

2 编写html代码，在页面添加一个div

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

添加javascript 代码，实例化分页插件

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

4               插件pagination()方法参数

参数名描述参数值
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回调函数             当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行
load_first_page
   
    		初始化时是否执行回调函数 如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;默认值: true

 

 

5 插件其它方法

    // 自定义事件触发分页    // 跳到第3页     $("#pagination").trigger(‘setPage‘, [2]);    // 下一页    $("#pagination").trigger(‘nextPage‘);    // 上一页    $("#pagination").trigger(‘prevPage‘);

 

后台代码就贴出来了，一般是返回json格式的数据到前面处理。

总结：JqueryPagination使用简单，只需要设置参数和回调函数就可以用，通过回调函数处理 翻页触发的事件，比较灵活。


联系
我们