常用分页效果

案例网站:
http://www.juanparts.com/Products.html

效果如图:


模板文件:/skin/.../paging.html
<div class="paging">
    / 
    Total  
    【<a href="">First</a>】
    【<a href="">Prev</a>】
    <span id="pagingnumber"></span>
    【<a href="">Next</a>】
    【<a href="">Last</a>】
<input id="txtGoPage" type="text" style="width:30px" />
    <input id="btnGoPage" type="button" style="width:30px" value="Go" onclick="GoPage('','','')" />
</div>

<script type="text/javascript" src="/Js/paging.js"></script>
<script type="text/javascript">I85Paging('', '', '');</script>

本地js:/Js/paging.js
//分页处理,产生1 2 3 ...之类的样式效果
function GoPage(totalpages, currentpage, firstpagehref) {
    //var totalpages = ;
    //var currentpage = ;
    var txtGoPage = document.getElementById("txtGoPage");
    var pagenumber = txtGoPage.value;
    if (pagenumber != undefined) {
        if (pagenumber != 0 && pagenumber != currentpage && pagenumber <= totalpages) {
            //var firstpagehref = "";
            var pagingprofix = firstpagehref.substr(0, firstpagehref.indexOf(".html"));
            if (pagenumber == 1)
                location.href = pagingprofix + ".html";
            else
                location.href = pagingprofix + pagenumber + ".html";
        }
    }
}

function I85Paging(totalpages,currentpage,firstpagehref)
{
    //var totalpages = ;
    if(totalpages>1)
    {
        //var currentpage = ;
        //var firstpagehref = "";
        var pagingnumber = document.getElementById("pagingnumber");
        var pagingcontent = "";
        var pagingprofix = firstpagehref.substr(0,firstpagehref.indexOf(".html"));
        var ii = 1;
        var jj = 0;
        if (currentpage / 10 > 1) {
            ii = (Math.floor(currentpage / 10) * 10 + 1); //取整得到后10页的开始页
            pagingcontent = "...";
        }
        for (var i = ii; i <= totalpages; i++) {
            if (i == 1)
                jj = '';
            else
                jj = i;
            if (i == currentpage)
                pagingcontent += "<a href='" + pagingprofix + jj + ".html'><b>" + i + "</b></a> ";
            else
                pagingcontent += "<a href='" + pagingprofix + jj + ".html'>" + i + "</a> ";

            if (i > (ii + 8)) {
                pagingcontent += "...";
                break;
            }
        }
        pagingnumber.innerHTML = pagingcontent;
    }
}

编辑
  
达网旗下网站 2009-2014 版权所有  浙ICP备09074410号
网站优化加速的首选:i85纯静态优化建站系统
关键词:网站制作, 优化建站, 静态网站, 网站建设  站点地图 RSS订阅