首页 > 代码库 > 0001.分页

0001.分页

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=http://www.mamicode.com/"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\">上一页</a>";            $("#next").on(‘click‘, function () {                goPage(currentPage - 1, pageSize);            });        }         else {           tempStr += "上一页";       }        if (currentPage < totalPage) {            tempStr += "<a href=http://www.mamicode.com/"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页</a>";        }         else {            tempStr += "下一页";            $("#font").on(‘click‘, function () {                goPage(currentPage + 1, pageSize);            });        }        if (currentPage > 1) {            tempStr += "<a href=http://www.mamicode.com/"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";        }         else {            tempStr += "首页";        }        if (currentPage < totalPage) {            tempStr += "<a href=http://www.mamicode.com/"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";        }        else {            tempStr += "尾页";        }        document.getElementById("barcon").innerHTML = tempStr;    }</script>
View Code

 

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.分页可以有多个页码的链接

  

 

0001.分页