js构造分页
第一步
html部分
<div class="goin_main_two_left">
<div class="">
消费记录
</div>
<form id="borrowListForm">
<table class="jth-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead class="table-nstyle-thead" style="border-top:1px dashed #000 ! important">
<td><strong> 消费时间</strong></td>
<td><strong> 消费金额</strong></td>
<td><strong> 消费内容</strong></td>
<td><strong> 获取收益</strong></td>
</thead>
<tbody class="table_td" id="consumption" name="consumption">
</table>
</form>
<div id="pager_exp" class="layout" ></div>
</div>
第二步
构造数据
function borrowQuery(page)
{
var lastPage=0;//最大页码
$.getJSON("${path}/GoldCoinManagement/findExp.html?" + new Date().getTime(),{
"page": page
},
function (data) {
$.each(data, function (k, v) {
if (k == "resultCode" && v == 0 ) {
$("#consumption").html("<tr align='center' ><td colspan='4'>没有记录</td></tr>");
} else if (k == "borrowQuety") {
//构造数据HTML
var html = "";
if (v != '') {
$.each(v, function (kk, vv) {
html += "<tr class='bbd' style='border-top:1px dashed #000 ! important;border-bottom:1px dashed #000 ! important;' >";
html += "<th hieght='60'>"+vv.edtTime+"</th>";
html += "<th>"+vv.edtNum+"</th>";
html += "<th>"+vv.edtWay+"</th>";
html += "<th>"+vv.bak+"</th>";
html += "</tr>";
});
$("#consumption").html(html);
} else {
$("#consumption").html("<tr align='center' ><td colspan='4'>没有记录</td></tr>");
}
} else
if(k=="lastPage")
{
lastPage=v;//最大页码
}else
if (k == "page") {
//构造分页HTML
var p = v;
//当前页码
var mathod="borrowQuery";//调用方法
var divName="#pager_exp";//构造分页DIV name
var pageMath=3;//省略号前面最大页码
goborrowPagejin(p,lastPage,mathod,divName,pageMath);
}
});
});
}
第三部构造分页
/**
* @author zhangzh
* @param 构造分页
* @addTiem 2017-8-13
* */
<script type="text/javascript" src="${path}/static/js/pagePaing.js"></script>
js文件
function goborrowPagejin(p,lastPage,mathod,divName,pageMath) {
if(p>lastPage)
{
p=lastPage;
}
var totalPages=lastPage;
var pagehtm = "";
pagehtm = pagehtm + "<ul class='pagination '>";
pagehtm = pagehtm + "<li><a + (p == 1 ? 1 : p - 1) + ");'>«</a></li>";
var curp = p;
var pageMaxO=0;
var pageO=0;
var pageT=0;
if(totalPages<pageMath)
{
pageMaxO=totalPages;
}
else
{
pageMaxO=pageMath;
}
for (var i = 1;i<=pageMaxO; i++) {
if (i == p) {
pagehtm = pagehtm + "<li class='active'><a + i + ");'>" + i + "</a></li>";
} else {
pagehtm = pagehtm + "<li ><a + i + ");'>" + i + "</a></li>";
}
}
if(p==pageMath && lastPage>pageMath)
{
pagehtm = pagehtm + "<li ><a </a></li>";
}
if(p>pageMath)
{
if(p==(pageMath+1))
{
pageO=(pageMath+1);
if(p+1<totalPages)
{
pageT=p+1;
}
else
{
pageT=totalPages;
}
}
else
{
pagehtm = pagehtm + "<li class=''><a href=''>***</a></li>";
if(p+1<totalPages)
{
pageT=p+1;
}
else
{
pageT=totalPages;
}
pageO=p-1;
}
for (var i = pageO; i <=pageT; i++) {
if (i == p) {
pagehtm = pagehtm + "<li class='active'><a + i + ");'>" + i + "</a></li>";
} else {
pagehtm = pagehtm + "<li ><a + i + ");'>" + i + "</a></li>";
}
}}
pagehtm = pagehtm + "<li><a + (p == totalPages ? totalPages : p + 1) + ");'>»</a></li>";
pagehtm = pagehtm + " </ul>";
$(""+divName+"").html(pagehtm);
}