分享一個JavaScript仿百度分頁函數的範例程式碼

分享一個JavaScript仿百度分頁函數的範例程式碼 

/**
      * Ajax分页功能
      * 在需要分页的地方添加<ul class="pagination"></ol>
      * 作为分页组件容器元素。
      * pageCount 总页数
      * currentPage 当前页数
      * container 带有pagination类的ol容器元素
      * loadData 用于加载数据的函数
      * version 1.0
      */
    pagination : function(pageCount, currentPage, container, loadData) {
        this.startPage = 1;
        this.endPage = pageCount;
        this.minDisplayPageCount = 5;
        var c = $(container);
        var paginationLinks = "";
        if(pageCount == 1) {
            c.css({&#39;visibility&#39;: &#39;hidden&#39;});
            return;
        }
        if(pageCount > this.minDisplayPageCount + 1) {
            if(currentPage - this.minDisplayPageCount > 0) {
                this.startPage = currentPage - this.minDisplayPageCount;
            }
            if((currentPage + this.minDisplayPageCount - 1) < pageCount) {
                this.endPage = currentPage + this.minDisplayPageCount - 1;
            } else {
                this.endPage = pageCount;
            }
         }

        paginationLinks += "<ul>";

         if(currentPage != 1) {
            paginationLinks += "<li><a id=&#39;prevpage&#39; href=&#39;javascript:;&#39; rel=&#39;prev&#39;>《上一页</a></li>";
        }

        for(var i = this.startPage; i <= this.endPage; i++) {
            if(currentPage == i) {
                paginationLinks += "<li id=&#39;page_" + currentPage + "_container&#39;><a id=&#39;page_" + i + "&#39; class=&#39;current&#39; href=&#39;javascript:;&#39;>" + currentPage + "</a></li>";
            } else {
                paginationLinks += "<li id=&#39;page_" + i + "_container&#39;><a id=&#39;page_" + i + "&#39; href=&#39;javascript:;&#39;>" + i + "</a></li>";
            }
        }

        if(currentPage < pageCount) {
            paginationLinks += "<li><a id=&#39;nextpage&#39; href=&#39;javascript:;&#39; rel=&#39;next&#39;>下一页》</a></li>";
        }

        paginationLinks += "</ul>";


        c.html(paginationLinks);
        var links = $("#page_number ul li a");

        links.each(function(index) {
            if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) {
                $(this).click(function(event) {
                    alert(links[index].innerHTML);
                    loadData(curTaskId,"","",parseInt(links[index].innerHTML));
                    pagination(pageCount, parseInt(links[index].innerHTML), container, loadData);
                });
            }
        });
        var prevPage = $("#prevpage");
        var nextPage = $("#nextpage");
        c.css({&#39;visibility&#39;: &#39;visible&#39;});
        if(prevPage) {
            prevPage.click(function(event) {
                loadData(curTaskId,"","",currentPage - 1);
                pagination(pageCount,  currentPage - 1, container, loadData);
            });
        }
        if(nextPage) {
            nextPage.click(function(event) {
                loadData(curTaskId,"","",currentPage + 1);
                pagination(pageCount, currentPage + 1, container, loadData);
            });
        }
    }

loadData為載入資料的函數，這個函數需要定義一個目前頁數的參數，例如：

var  currentPage  = 1;
loadExamList(currentPage){
  //TODO
  pagination(5,currentPage,$(ul),loadExamList);
};

5是總頁數，1是目前頁數，$(ul)是要將頁碼按鈕存放的位置，loadExamList是點選上一頁、下一頁或頁碼的時候呼叫的函數。

以上是分享一個JavaScript仿百度分頁函數的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！