第一步，先下载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