使用jQuery的分页插件jquery.pagination.js进行分页

1,需要用到jquery.pagination.js和pagination.css

https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w

https://pan.baidu.com/s/1KvutZaTa21xW-JZsKNb4lQ

2,分页的js代码如下

var pageNum = 1;
var pageSize = 10;
//查询列表数据
function searchList() {
    loadingFlag = true
    $.ajax({
        url:"searchListData",
        type:"post",
        data:{
            name : "name"
            loadingFlag : false
        },
        dataType: "json",
        success:function(obj){
            if (obj.code = 101){
                $(".search-total span").html(obj.data.total);
                $(".data-list-total strong").html(obj.data.total);
                //展示列表信息
                showSearchResult(obj.data.resultList);
                //展示分页信息
                showPage(obj.data.total,pageSize,pageNum);
            }
        }
    })
    //loading动画
    if(loadingFlag){
        var spanT = '<div style=\'width:400px;height:450px;margin: 100px auto;\'>\n' +
            '<img src=\'images/loading.gif\' style=\'width:400px;height:400px;\'>\n' +
        '</div>';
        $("#content").empty();
        $('#content').append(spanT)
    }
}

//分页
function showPage(total, pageSize, pageNum) {
    $(".navigation").empty();
    var pageHtml = '<div class="pagination my-pagination" style="margin-right: 2%;float: right;">';
    pageHtml += '<div class="M-box"></div>';
    pageHtml += '<div class="tips">当前是第<span class="now">'+pageNum+'</span>页,总共<span class="totalPage"></span>页,总共<span class="count"></span>条数据</div>';
    pageHtml += '</div>';
    $(".navigation").append(pageHtml);

    var totalPage = Math.ceil(total / pageSize);
    $('.totalPage').text(totalPage);
    $('.count').text(total);
    $('.M-box').pagination({
        pageCount: totalPage,
        current:pageNum,//当前第几页
        jump: false,
        coping: true,
        homePage: '首页',
        endPage: '末页',
        prevContent: '上页',
        nextContent: '下页',
        callback:PageListClick
    });
}
//分页的回调函数
function PageListClick(page_index){
    $('.now').text(page_index.getCurrent());
    pageNum = page_index.getCurrent();
    searchList();//点击分页加载列表数据  */
}

 

转载于:https://www.cnblogs.com/cailijuan/p/10451205.html