插件展示效果
使用方法
引入插件CSS、js。
<link rel="stylesheet" type="text/css" href="pagination.css" /><script src="jquery.paging.js" type="text/javascript" charset="utf-8"></script>
在项目中添加一个方法
function getDPage(totalPage,currPage){ $(‘.pagination‘).pagination({ pageCount:totalPage, coping:true, current:currPage, prevContent:‘上一页‘, nextContent:‘下一页‘, callback:function(api){ getData(api.getCurrent()); $(‘body,html‘).scrollTop(0); } }); }
最后是分页的使用
该处为传给之前写的方法中的参数:totalPage为后台传给的页码的总数,page为当前选中的页码数。
function getData(page) {$(".pagination").addClass("hidden");//分页先隐藏var data=({})//传递给后台的参数,page为选中的页码, $.ajax({ type: "post", url: ‘‘, data: { "data": JSON.stringify(data) }, dataType: "json", success: function(data) { $(".pagination").removeClass("hidden");//展示分页 if(page == 1) { $(".pagination").empty();//单页面有多个分页的情况先需要先清除页面分页代码。 if($(".pagination").html().trim() == "") { getDPage(totalPage, page);//该处为传递给之前定义的方法中的参数:totalPage为后台传递的页码的总数,page为当前选中的页码数。 } } }, beforeSend: function(t) {}, error: function(t) { var a = JSON.stringify(t) } }); }
为何需要先隐藏分页,原因是项目一般都会要求只有一页是不需要展示分页效果。
获取列表一信息时必须使用getData(page)方法,分页才能正常使用。
样式CSS、js我已整理好:http://pan.baidu.com/s/1bpGT68Z
时间: 2024-10-15 14:23:29