推荐一款分页插件

Posted 2020-08-13

插件展示效果

  

使用方法

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