标签：style blog http io color ar os java for
1、首页、尾页、上一页、下一页的分页(第一页为固定行,不变)
<!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.diandianPayType { margin: 2px; line-height: 14px; font-size: 14px; white-space: nowrap; width: 120px; font-weight: bolder; color: #8B0000; } .diandianMoneyInfo span.diandianPayMoney { line-height: 14px; font-size: 14px; font-weight: bolder; color: black; margin: 2px 3px 2px 2px; float: right; } li.diandianBookOrderli .diandianOrderTime { width: 330px; height: 20px; bottom: 2px; line-height: 14px; font-size: 14px; color: white; font-weight: bolder; text-align: center; margin: 2px 10px 2px 10px; } </style> <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.on(‘click‘,function () {
GetTackOutPage(1, 8);
});
//上一页的点击事件
tackOutPrevPage.on(‘click‘,function () {
GetTackOutPage(currentPage - 1, 8);
});
//下一页的点击事件
tackOutNextPage.on(‘click‘,function () {
GetTackOutPage(currentPage + 1, 8);
});
//尾页的点击事件
endPage.on(‘click‘,function () {
GetTackOutPage(totalPage, 8);
});
3.分页可以有多个页码的链接
标签：style blog http io color ar os java for
原文地址：http://www.cnblogs.com/zhang-12759/p/4076491.html
