javascript ajax 仿百度分頁(yè)函數(shù)
更新時(shí)間:2013年10月29日 17:51:52 作者:
百度分頁(yè)想必大家都知道吧,瀏覽網(wǎng)頁(yè)的朋友都應(yīng)該知道,下面有個(gè)小例子使用到了js、ajax等來(lái)模仿百度的分頁(yè),感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
/**
* Ajax分頁(yè)功能
* 在需要分頁(yè)的地方添加<ul class="pagination"></ol>
* 作為分頁(yè)組件容器元素。
* pageCount 總頁(yè)數(shù)
* currentPage 當(dāng)前頁(yè)數(shù)
* container 帶有pagination類(lèi)的ol容器元素
* loadData 用于加載數(shù)據(jù)的函數(shù)
* 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) < pageCount) {
this.endPage = currentPage + this.minDisplayPageCount - 1;
} else {
this.endPage = pageCount;
}
}
paginationLinks += "<ul>";
if(currentPage != 1) {
paginationLinks += "<li><a id='prevpage' href='javascript:;' rel='prev'>《上一頁(yè)</a></li>";
}
for(var i = this.startPage; i <= this.endPage; i++) {
if(currentPage == i) {
paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>";
} else {
paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>";
}
}
if(currentPage < pageCount) {
paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一頁(yè)》</a></li>";
}
paginationLinks += "</ul>";
c.html(paginationLinks);
var links = $("#page_number ul li a");
links.each(function(index) {
if(!(this.innerHTML == "上一頁(yè)" || this.innerHTML == "下一頁(yè)")) {
$(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為加載數(shù)據(jù)的函數(shù),這個(gè)函數(shù)需要定義一個(gè)當(dāng)前頁(yè)數(shù)的參數(shù),比如:
復(fù)制代碼 代碼如下:
var currentPage = 1;
loadExamList(currentPage){
//TODO
pagination(5,currentPage,$(ul),loadExamList);
};
5是總頁(yè)數(shù),1是當(dāng)前頁(yè)數(shù),$(ul)是要將頁(yè)碼按鈕存放的位置,loadExamList是點(diǎn)擊上一頁(yè)、下一頁(yè)或者頁(yè)碼的時(shí)候調(diào)用的函數(shù)。
您可能感興趣的文章:
- 使用bootstrap-paginator.js 分頁(yè)來(lái)進(jìn)行ajax 異步分頁(yè)請(qǐng)求示例
- Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)
- vue.js 表格分頁(yè)ajax 異步加載數(shù)據(jù)
- js實(shí)現(xiàn)ajax分頁(yè)完整實(shí)例
- 使用Jquery+Ajax+Json如何實(shí)現(xiàn)分頁(yè)顯示附JAVA+JQuery實(shí)現(xiàn)異步分頁(yè)
- Jquery+Ajax+Json+存儲(chǔ)過(guò)程實(shí)現(xiàn)高效分頁(yè)
- 基于Jquery+Ajax+Json實(shí)現(xiàn)分頁(yè)顯示附效果圖
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無(wú)刷新分頁(yè)的實(shí)例代碼
- 基于Jquery+Ajax+Json的高效分頁(yè)實(shí)現(xiàn)代碼
- 原生js+ajax分頁(yè)組件
相關(guān)文章
JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06
如何利用原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值
這篇文章主要介紹了如何利用原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
JavaScript數(shù)組中reduce方法的應(yīng)用詳解
JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個(gè)值,,所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應(yīng)用,需要的可以參考一下2023-07-07
JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
JavaScript 俄羅斯方塊游戲?qū)崿F(xiàn)方法與代碼解釋
這篇文章主要介紹了JavaScript 俄羅斯方塊游戲,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 俄羅斯方塊游戲原理、實(shí)現(xiàn)步驟及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04

