00001、分页
这几天再找分页的方法，仅简单的总结了一下。
以下为Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>分页</title> <style type="text/css"> ul.diandianSundryOrderList { color: #000; width: 349px; } .diandianSundryOrderList li.diandianBookOrderli { padding: 2px; height: 58px; width: 349px; line-height: 58px; margin-bottom: 2px; background-position: center bottom; } .diandianBookOrderli div.diandianAdress { font-size: 14px; overflow: hidden; height: 14px; line-height: 14px; white-space: nowrap; margin: 4px 10px 4px 10px; text-overflow: ellipsis; /*超出部分为省略号*/ } .diandianBookOrderli .diandianMoneyInfo { width: 330px; height: 16px; line-height: 16px; margin: 4px 12px 4px 10px; } .diandianMoneyInfo span.diandianPayMoney { line-height: 14px; font-size: 14px; font-weight: bolder; color: black; margin: 2px 3px 2px 2px; float: right; } </style> <body onLoad="goPage(1,2);"> <ul class="diandianSundryOrderList" id="diandianSundryOrderList" name="diandianSundryOrderList"> <li id="831806725928139" class="diandianBookOrderli" name="diandianBookOrderli"> <div class="diandianAdress" name="diandianAdress">余杭区闲林街道</div> <div class="diandianMoneyInfo" name="diandianMoneyInfo"> <span class="diandianPayMoney" name="diandianPayMoney">39.0元</span> </div> </li> <li id="Li1" class="diandianBookOrderli" name="diandianBookOrderli"> <div class="diandianAdress" name="diandianAdress">余杭区闲林街道 何母桥村</div> <div class="diandianMoneyInfo" name="diandianMoneyInfo"> <span class="diandianPayMoney" name="diandianPayMoney">39.0元</span> </div> </li> <li id="Li2" class="diandianBookOrderli" name="diandianBookOrderli"> <div class="diandianAdress" name="diandianAdress">余杭区闲林街道 何母桥村全丰苑</div> <div class="diandianMoneyInfo" name="diandianMoneyInfo"> <span class="diandianPayMoney" name="diandianPayMoney">39.0元</span> </div> </li> <li id="Li3" class="diandianBookOrderli" name="diandianBookOrderli"> <div class="diandianAdress" name="diandianAdress">余杭区闲林街道 何母桥村全丰苑17幢</div> <div class="diandianMoneyInfo" name="diandianMoneyInfo"> <span class="diandianPayMoney" name="diandianPayMoney">39.0元</span> </div> </li> </ul> <div id="barcon"></div>
<div id="innerpage"></div> </body> </html>
1、首页、尾页、上一页、下一页的分页(第一页为固定行,不变)
<script type="text/javascript">
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
function goPage(pno, psize) {
var itable = document.getElementById("diandianSundryOrderList");
var lis = itable.getElementsByTagName('li');
var num = lis.length; //表格行数
var totalPage = 0; //总页数
var pageSize = psize; //每页显示行数
if (num / pageSize > parseInt(num / pageSize)) {
totalPage = parseInt(num / pageSize) + 1;
} else {
totalPage = parseInt(num / pageSize);
}
var currentPage = pno; //当前页数
var startRow = (currentPage - 1) * pageSize; //开始显示的行
var endRow = currentPage * pageSize; //结束显示的行
endRow = (endRow > num) ? num : endRow;
//第一行始终显示
for (var i = 0; i < num; i++) {
if (i >= startRow && i < endRow) {
lis[i].style.display = 'block';
} else {
lis[i].style.display = 'none';
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr ="";
if (currentPage > 1) {
tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\">上一页</a>";
$("#next").on('click', function () {
goPage(currentPage - 1, pageSize);
});
}
else {
tempStr += "上一页";
}
if (currentPage < totalPage) {
tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页</a>";
}
else {
tempStr += "下一页";
$("#font").on('click', function () {
goPage(currentPage + 1, pageSize);
});
}
if (currentPage > 1) {
tempStr += "<a href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
}
else {
tempStr += "首页";
}
if (currentPage < totalPage) {
tempStr += "<a href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
}
else {
tempStr += "尾页";
}
document.getElementById("barcon").innerHTML = tempStr;
}
</script>
2.首页、尾页、上一页与下一页的分页(无固定行)
var totalPage=1;//总页数 var currentPage=1;//当前页数 //获取列表分页 GetTackOutPage = function (pno, psize) { var itable = document.getElementById("tackOutSundryOrderList"); var lis = itable.getElementsByTagName("li"); var num = lis.length; //ul行数 totalPage = 0; //总页数 pageSize = psize; //每页显示行数 if ((num - 1) / pageSize >= parseInt((num - 1) / pageSize)) { totalPage = parseInt((num - 1) / pageSize) + 1; } else { totalPage = parseInt((num - 1) / pageSize); } currentPage = pno; //当前页数 var startRow = (currentPage - 1) * pageSize; //开始显示的行 var endRow = currentPage * pageSize; //结束显示的行 endRow = (endRow > num) ? num : endRow; for (var i = 0; i < num; i++) { if (i >= startRow && i < endRow) { lis[i].style.display = 'block'; } else { lis[i].style.display = 'none'; } } var pageEnd = document.getElementById("tackOutEndPage"); tackOutFirstPage.removeClass(); tackOutPrevPage.removeClass(); tackOutNextPage.removeClass(); endPage.removeClass(); if (currentPage > 1) { tackOutFirstPage.attr("disabled", false); tackOutFirstPage.addClass("tackOutHomePage"); } else { tackOutFirstPage.attr("disabled", true); tackOutFirstPage.addClass("tackOutHomePageUnable"); } if (currentPage > 1) { tackOutPrevPage.attr("disabled", false); tackOutPrevPage.addClass("tackOutPrevPage"); } else { tackOutPrevPage.attr("disabled", true); tackOutPrevPage.addClass("tackOutPrevPageUnable"); } if (currentPage < totalPage) { tackOutNextPage.attr("disabled", false); tackOutNextPage.addClass("tackOutNextPage"); } else { tackOutNextPage.attr("disabled", true); tackOutNextPage.addClass("tackOutNextPageUnable"); } if (currentPage < totalPage) { endPage.attr("disabled", false); endPage.addClass("tackOutEndPage"); } else { endPage.attr("disabled", true);//控制事件是否能用 endPage.addClass("tackOutEndPageUnable"); } }; //首页的点击事件， tackOutFirstPage要定义 tackOutFirstPage.on('click',function () { GetTackOutPage(1, 8); }); //上一页的点击事件 tackOutPrevPage.on('click',function () { GetTackOutPage(currentPage - 1, 8); }); //下一页的点击事件 tackOutNextPage.on('click',function () { GetTackOutPage(currentPage + 1, 2); }); //尾页的点击事件 endPage.on('click',function () { GetTackOutPage(totalPage, 2); });
3.分页可以有多个页码的链接
var obj, j; var page = 0; var nowPage = 0; //当前页 var listNum = 2; //每页显示条数 var PagesLen; //总页数 var PageNum =5; //分页链接数(5个) onload = function () { obj = document.getElementById("diandianSundryOrderList").getElementsByTagName("tr"); j = obj.length; PagesLen = Math.ceil(j / listNum); upPage(0); }; function upPage(p) { nowPage = p; //内容变换 for (var i = 0; i < j; i++) { obj[i].style.display = "none"; } for (var i = p * listNum; i < (p + 1) * listNum; i++) { if (obj[i]) obj[i].style.display = "block"; } //分页链接变换 strS = '<a href="###" onclick="upPage(0)">首页</a> '; var PageNum_2 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) + 1 : Math.ceil(PageNum / 2) ; var PageNum_3 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) : Math.ceil(PageNum / 2) + 1; var strC = "",startPage, endPage; if (PageNum >= PagesLen) { startPage = 0; endPage = PagesLen - 1; } else if (nowPage < PageNum_2) { startPage = 0; endPage = PagesLen - 1 > PageNum ? PageNum: PagesLen - 1; } //首页 else { startPage = nowPage + PageNum_3 >= PagesLen ? PagesLen - PageNum - 1 : nowPage - PageNum_2 + 1; var t = startPage + PageNum; endPage = t > PagesLen ? PagesLen - 1 : t; } for (var i = startPage; i <= endPage; i++) { if (i == nowPage) strC += '<a href="#" class="curpage" onclick="upPage(' + i + ')">' + (i + 1) + '</a> '; else strC += '<a href="#JavaScript:Page()" onclick="upPage(' + i + ')">' + (i + 1) + '</a> '; } strE = ' <a href="###" onclick="upPage(' + (PagesLen - 1) + ')">尾页</a> '; strE2 = nowPage + 1 + "/" + PagesLen + "页" + " 共" + j + "条"; document.getElementById("innerpage").innerHTML = strS +strC +strE+strE2; }
