首页 > 代码库 > 推荐一款分页插件

推荐一款分页插件

插件展示效果

  技术分享

使用方法

引入插件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

推荐一款分页插件