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();//点击分页加载列表数据 */ }