第一步，先下載bootstrap分頁插件，https://pan.baidu.com/s/1z339NyWctCbwKw2Z2nBCcg
第二步，將js和css放入你的工程目錄，並導入界面
<link href="/util/res/myPage.css" rel="stylesheet" type="text/css" />
<script src="/util/res/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/util/res/jqPaginator.min.js" type="text/javascript"></script>
<script src="/util/res/myPage.js" type="text/javascript"></script>
第三步，body部分，設置初始化參數
<body class="fix-header" style="font-size:15px;background:white;width:100%;overflow:hidden;">
<div class="row" style="width:100%;height:100%;margin:auto;">
<div class="panel" style="width:100%;height:91%;overflow:auto;margin:auto;border:1px solid #ddd;border-radius:5px;">
<div class="table-responsive">
<table class="table table-hover manage-u-table">
<thead>
<tr style="background:#f0f0f0;">
<th>#NO</th>
<th>時間</th>
<th>所屬鎮</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="outTimeList">
</tbody>
</table>
</div>
</div>
<div class="row" style="width:100%;height:10%;margin:auto;" id="pageDivHidden">
<div style='width:100%;border-radius:5px;border-bottom:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:0px solid #ddd;height:100%;text-align:center;'>
<ul class="pagination" id="pagination" style="margin:auto;margin-top:2px;">
</ul>
<!--PageCount是一共多少條數據-->
<input type="hidden" id="PageCount" runat="server" value="" />
<!--PageSize是頁面顯示多少條數據-->
<input type="hidden" id="PageSize" runat="server" value="30" />
<!--countindex這個參數是通過上面的PageCount與PageSize計算出來的分多少頁-->
<input type="hidden" id="countindex" runat="server"/>
<!--上一頁與下一頁中間的數字框，要顯示幾個就value多少個-->
<input type="hidden" id="visiblePages" runat="server" value="7" />
</div>
</div>
</div>
<input type="hidden" id="currentPageNum" name="currentPageNum" value="" /><!--當前頁數-->
</body>
第四步，界面初始化
window.onload=function(){
loadData(1); //加載數據列表
//計算分好多頁，先去拿總數量和一頁顯示的大小，用來計算分多少頁
var s=$("#PageCount").val()%$("#PageSize").val();
if(s!=0){
$("#countindex").val(Math.ceil($("#PageCount").val()/$("#PageSize").val()));
}else{
$("#countindex").val($("#PageCount").val()/$("#PageSize").val());
}
//設置頁面顯示幾個分頁條
$("#visiblePages").val($("#countindex").val());
//加載分頁條
loadpage();
}
第五步，當前頁變動的時候
//當你點擊第幾頁的時候，也就是當前頁數變動的時候，
function exeData(num,type) {
loadData(num); //將當前變動的頁數賦值給異步拿數據的方法
loadpage(); //加載分頁條
}
第六步，和後臺數據交互
// 初始化界面去後臺拿數據
function loadData(num){
$("#currentPageNum").val(num); //當前頁數
$.ajaxSettings.async = false; //設置爲同步請求
$.post("/desktopAction.jsp",{"act":"chuguijingbao","curPage":num},function(json){
$("#outTimeList").html(""); //拼接數據之前，清空之前的數據
$("#PageCount").val(json[0].totalNum);//總條數
var outTimeData=json[0].GHGZJBData;
if(outTimeData.length>0){
for(var i=0; i<outTimeData.length;i++){
$("#outTimeList").append("<tr>"+
"<td style='text-align:center;'>"+(((num-1)*30+i)+1)+
"</td>"+
"<td>"+unescape($(outTimeData[i]).attr("c_dat3"))+
"</td>"+
"<td>"+unescape($(outTimeData[i]).attr("citys"))+
"</td>"+
"<td>"+unescape($(outTimeData[i]).attr("c_ex1"))+
"</td>"+
"<td>"+unescape($(outTimeData[i]).attr("c_ex2"))+
"</td>"+
"<td>"+unescape($(outTimeData[i]).attr("c_ex5"))+
"</td>"+
"</tr>");
}
}else{
$("#pageDivHidden").css("display","none");
$("#outTimeList").append("<tr rowspan='5'><td colspan='10' style='text-align:center;'><span style='font-size:25px;'>暫無任何信息！</span></td></tr>");
}
},"json");
}
效果爲：
不清楚的夥伴們，歡迎聯繫舉哥QQ：1693940631