JQ实现简单分页工具

分页工具条初始化实现

最新推荐文章于 2024-09-01 14:04:36 发布

转载最新推荐文章于 2024-09-01 14:04:36 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wz950116/p/6628833.html

/**    
    *分页工具条初始化
    *
    *@param {string} [pageId] [页面分页工具栏外层容器标签ID]
    *@param {number} [sumPage] [总页数]
    *@param {number} [currPage] [当前页]
    *
    *@author:h51701
    *@date:2017/3/27
    *
*/
pageUtil("#page",40,8);
function pageUtil(element,sumPage,curPage){
    //off 每次绑定事件前先卸载多个事件
    $(element).off("click", "a").on("click","a",function(){
        index = $(this).text();
        switch(index){
            case "首页":
                pageUtil(element,sumPage,1);
                break;
            case "<<上一页":
                if(startPage == 1) break;
                pageUtil(element,sumPage,curPage-1);
                break;
            case "下一页>>":
                if(curPage == sumPage) break;
                pageUtil(element,sumPage,curPage+1);
                break;
            case "尾页":
                pageUtil(element,sumPage,sumPage);
                break;
            default:
                pageUtil(element,sumPage,parseInt(index));
                break;
        }
    });            
                    
    //分页工具条主结构
    var    mainStr = '<a href="" class="last" onclick="return false">下一页>></a>';
    mainStr = curPage == 1 ? "" + mainStr : '<a href="" class="last" onclick="return false"><<上一页</a>' + mainStr;
    mainStr = curPage > 5 ? '<a href="" onclick="return false">首页</a>' + mainStr : mainStr;
    mainStr += curPage > 10 && curPage < (sumPage-5) ? '<a href="" onclick="return false">尾页</a>' : "";
    $(element).html(mainStr);
    //确认页码起始数字
    var startPage = curPage < 6 ? 1 : curPage-4,
        pageNumStr = "";
    //若起始页数小于最后一页 并且 循环不大于十次
    for(var i=0;startPage<=sumPage&&i<10;i++){
        startPage == curPage ? pageNumStr += "<a href='' class='red' onclick='return false'>"+startPage+"</a>" : pageNumStr += "<a href='' onclick='return false'>"+startPage+"</a>";
        startPage++;
    }
    //添加
    $(element).find("a:contains('下一页')").before(pageNumStr);

    
}

简单的分页控件，输入容器id值即可。

转载于:https://www.cnblogs.com/wz950116/p/6628833.html