您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

分享一个JavaScript仿百度分页函数的示例代码

2026/2/11 19:48:29发布5次查看
分享一个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({'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'>《上一页</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'>下一页》</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({'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是点击上一页、下一页或者页码的时候调用的函数。
以上就是分享一个javascript仿百度分页函数的示例代码 的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product