javascript ajax 模倣 Baidu ページング関数_javascript スキル

复制代代码如下:

/**
* Ajax ページング関数
* ページングが必要な場合、ページング コンポーネントのコンテナ要素として

* を追加します。
* pageCount 総ページ数
* currentPage 現在のページ番号
* ページネーション クラスを持つコンテナーまたはコンテナー要素
* データをロードするためのloadData 関数
* バージョン 1.0
*/
ページネーション : function( pageCount、currentPage、container、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) < pageCount) {
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 < pageCount) {
paginationLinks = "
• 下一页》
";
}
paginationLinks = "
";
c.html(ページネーションリンク);
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)、コンテナ、loadData)
}
});
var prevPage = $("#prevpage");
var nextPage = $("#nextpage");
c.css({'可視性': '可視'});
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) 、コンテナ、loadData);
});
}
}

loadData は追加データの関数です。この関数には、定義された現在の页数のパラメータが必要です。例:

复制代代码如下:

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

5 は総数、1 は現在の数、$(ul) はコードファイルを保存する必要がある位置、loadExamList は点の上一页、下一页またはそのコードの時間調整に使用されます。関数数。