首页 > 代码库 > 推荐一款分页插件
推荐一款分页插件
插件展示效果
使用方法
引入插件CSS、js。
<link rel="stylesheet" type="text/css" href="pagination.css" />
<script src="http://www.mamicode.com/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=http://www.mamicode.com/({})//传递给后台的参数,page为选中的页码,>"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
推荐一款分页插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。