插件介绍
此插件是jQuery的ajax分页插件。分页切换时无刷新也无延迟,因为是一次性加载的。如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好!
插件使用
此插件使用比较简单。主要引入以下文件就可以用了
1.jquery.js依赖库
2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可
<div class='pagination'></div>
3.jquery.pagination.js 分页的主要骨架
参数说明
使用方法
1 $("#Pagination").pagination(pageCount, {
2 num_edge_entries: 2,
3 num_display_entries: 4
4 callback: pageselectCallback,
5 items_per_page:10,
6 prev_text: "<上一页",
7 next_text: "下一页>"
8 });
上面代码中的pageCount一般是从后台返回的总的数据条数,也就是你一共有多少条数据。num_dege_entries:2表示首尾两侧分页显示2个。num_display_entries:4表示的是连续分页显示的主体数目,item_per_page:每页显示的列表项为10个。callback:pageselectCallback为回调函数。prev_text和next_text为前一页下一页按钮上的显示文字,默认的话是Prev 和 Next。
主要代码与效果展示
1.效果图
2.主要代码
1 //首次查询:
2 offline_mark = keeper_offline("1");
3 if (offline_mark != false) {
4 offlinePageMark();//分页查询
5 }
6 //--分页
7 function offlinePageMark(){
8 $("#offlinePage").pagination(offline_mark, {
9 num_edge_entries: 1, //边缘页数
10 num_display_entries: 5,//主体页数
11 callback: offlinePageCallback,
12 items_per_page: 2, //每页显示2项
13 prev_text: "<上一页",
14 next_text: "下一页>"
15 });
16 }
17
18 function offlinePageCallback(page_index, jq) {
19 var page_index = parseInt(page_index 1);
20 keeper_offline(page_index);
21 return false;
22 }
23 function keeper_offline(pageStr){
24 var offline_mark = false;
25 var params={};
26 params.helperId=helperId;
27 params.homeStatus = "offline";
28 params.page = pageStr;
29 $.ajax({
30 type: 'post',
31 dataType: 'json',
32 async:true,
33 url: house_keeperURL,
34 data:{params:JSON.stringify(params)},
35 success: function (result) {
36 if (result.retCode=="0000"){
37 offline_mark = result.pageCount;
38 //列表内容展示代码集,太多了,就省略了,根据各自需求去展示自己的内容就可以了
39 }else{
40 }
41 }
42 })
43 return offline_mark;
44 }
总结:
jquery pagination 是一个很好用的分页插件,展示的效果也是能适应大多需求的,样式的话也可以自己去改她的css就可以了。上手极其容易。我刚始接触分页的时候,并没有用这个插件。而是自己去写的一些共通的方法,代码也不多。后来,有了她,我就直接用她了。不过,我现在也不用她去分页了,现在用的就是layui的分页插件。如果还有不懂的童鞋,可以给我留言你的问题。