首頁 > web前端 > js教程 > javascript ajax 仿百度分頁函數_javascript技巧

javascript ajax 仿百度分頁函數_javascript技巧

WBOY
發布: 2016-05-16 17:18:18
原創
1126 人瀏覽過
複製程式碼如下程式碼:

/**
* Ajax分頁功能
* 在需要分頁的地方加入

    * 作為分頁元件容器元素。
    * pageCount 總頁數
    * currentPage 目前頁數
    * container 帶有pagination類別的ol容器元素
    * loadData 用於載入資料的函數
    * version 1.0
    */
    分頁 : function( pageCount, currentPage, 容器, loadData) {
    this.startPage = 1;
    this.endPage = pageCount;
    this.minDisplayPageCount = 5;
    var c = $(容器);
    var paginationLinks = "";
    if(pageCount == 1) {
    c.css({'visibility': 'hidden'});
    回傳;
    }
    if(pageCount > this.minDisplayPageCount 1) {
    if(currentPage - this.minDisplayPageCount > 0) {
    this.startPage = currentPage -this.minDisplayPageCount;
    }
    if((currentPage this.minDisplayPageCount - 1) this.endPage = currentPage this.minDisplayPageCount - 1;
    } else {
    this.endPage = pageCount;
    }
    }
    paginationLinks = "
      ";
      if(currentPage != 1) {
      paginationLinks = "
    • ";
      }
      for(var i = this.startPage; i if(currentPage == i) {
      paginationLinks = "
    • " currentPage "
    • ";
      } else {
      paginationLinks = "
    • " 我「」;
      }
      }
      if(currentPage paginationLinks = "
    • 下一頁》
    • ";
      }
      paginationLinks = "
    ";
    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));
    分頁(pageCount, parseInt(links[index].innerHTML), Container, loadData)
    }); var prevPage = $("#prevpage");
    var nextPage = $("#nextpage") ;
    c.css({'可見性': '可見'});
    if(prevPage) {
    prevPage.click(function(event) {
    loadData(curTaskId,"", "", currentPage - 1);
    分頁(pageCount, currentPage - 1,容器,載入資料)
    });
    }
    if(nextPage) {
    nextPage.click(function (event) {
    loadData(curTaskId,"","",currentPage 1)
    分頁(pageCount, currentPage 1 , 容器, loadData)
    }
    }


    load載入資料的函數,函數需要定義一個目前頁數的參數,例如:



複製程式碼
程式碼如下: var currentPage = 1; loadExamList(currentPage){
//TODO
分頁(5,currentPage,$(ul),loadExamList );
};

5是總頁數,1是目前頁數,$(ul)是虛擬頁碼按鈕存放的位置,loadExamList是點選上一頁、下一頁頁或頁碼的呼叫時的函數。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板