JQ實現簡單分頁工具


/**    
    *分頁工具條初始化
    *
    *@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值即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM