使用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();//點擊分頁加載列表數據 */
}