Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > javascript ajax 仿百度分页函数_javascript技巧

javascript ajax 仿百度分页函数_javascript技巧

WBOY
Freigeben： 2016-05-16 17:18:18
Original
1127 Leute haben es durchsucht
复制代码 代码如下:

/**
* Ajax分页功能
* 在需要分页的地方添加

    * 作为分页组件容器元素。
    * 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({'visibility': 'hidden'});
    return;
    }
    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 += "
    • " + i + "
      • ";
      }
      }
      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));
    pagination(pageCount, parseInt(links[index].innerHTML), container, loadData);
    });
    }
    });
    var prevPage = $("#prevpage");
    var nextPage = $("#nextpage");
    c.css({'visibility': 'visible'});
    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是点击上一页、下一页或者页码的时候调用的函数。
Verwandte Etiketten：
分页函数
Quelle：php.cn
Vorheriger Artikel：js同比例缩放图片的小例子_javascript技巧 Nächster Artikel：javascript实现颜色渐变的方法_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...
Aus 2024-04-06 21:58:04
0
1
800
Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus? Hier ist meine Sort.js-Stilkomponente: <SortWrapper><SortText>SortBy</SortT...
Aus 2024-04-06 21:28:37
0
1
2257
Die for-Schleife geht zufällig von 1 auf 0 Grundsätzlich kann sich die for-Schleife jedes Mal, wenn die Seite aktualisiert wird, von ...
Aus 2024-04-06 16:48:14
0
1
393
Ich habe Probleme mit einem CSS-Raster, dessen Höhe nicht meinen Erwartungen entspricht. Welche Fehler könnte ich machen? Ich lerne gerade CSS-Raster und wurde gebeten, diese Karte zu erstellen, indem ich sie in ...
Aus 2024-04-06 12:52:14
0
1
339
Die Ausführungsreihenfolge der VueJS-Planungsfunktionen verursacht Probleme Ich versuche, eine Liste von Ankündigungen (von der API abgerufen) auf einer Seite anzuzei...
Aus 2024-04-06 10:37:58
0
1
385
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage