Jquery中的动态分页
我有这个代码：
//Pagination pageSize = 8; showPage = function(page) { $(".line-content").hide(); $(".line-content").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); } showPage(1); $("#pagin li a").click(function() { $("#pagin li a").removeClass("current"); $(this).addClass("current"); showPage(parseInt($(this).text())) }); .current { color: green; } #pagin li { display: inline-block; }
1 I have some content 2 I have some content 3 I have some content 4 I have some content 5 I have some content 6 I have some content 7 I have some content 8 I have some content 9 I have some content 10 I have some content 11 I have some content 12 I have some content
我希望数字根据要显示的div数自动生成，而不是在我的HTML文件中手动编写数字。
我的代码有效，但第3页和第4页没有任何内容。我希望它们能够使用Jquery动态更改，而不是更新HTML文件中的数字。
计算页数而不是通过循环创建链接到页面。
//Pagination pageSize = 8; var pageCount = $(".line-content").length / pageSize; for(var i = 0 ; i'+(i+1)+' '); } $("#pagin li").first().find("a").addClass("current") showPage = function(page) { $(".line-content").hide(); $(".line-content").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); } showPage(1); $("#pagin li a").click(function() { $("#pagin li a").removeClass("current"); $(this).addClass("current"); showPage(parseInt($(this).text())) });
.current { color: green; } #pagin li { display: inline-block; }
1 I have some content 2 I have some content 3 I have some content 4 I have some content 5 I have some content 6 I have some content 7 I have some content 8 I have some content 9 I have some content 10 I have some content 11 I have some content 12 I have some content
将它放置在DOM准备就绪时执行的某处，但是在添加单击事件处理程序之前。
//How many pages do we want? elementCount = $('.line-content').size(); pageCount = Math.ceil(elementCount / pageSize); //Add the buttons. buttons = ''; for(i=1; i<=pageCount; i++) { buttons += '' + i + ' '); } $('#pagin').html(buttons);
然后你可以将#pagin留空，JavaScript将为你填充：
Disclaimar：我还没有测试过这段代码。
您需要使用Math.ceil($(".line-content").size() / pageSize)对页面进行计数，然后为每个页面动态添加
。
我已将初始化代码移到$（）内（即Ready事件）。
//Pagination pageSize = 8; $(function() { var pageCount = Math.ceil($(".line-content").size() / pageSize); for (var i = 0; i < pageCount; i++) { if (i == 0) $("#pagin").append('' + (i + 1) + ' '); else $("#pagin").append('' + (i + 1) + ' '); } showPage(1); $("#pagin li a").click(function() { $("#pagin li a").removeClass("current"); $(this).addClass("current"); showPage(parseInt($(this).text())) }); }) showPage = function(page) { $(".line-content").hide(); $(".line-content").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); }
.current { color: green; } #pagin li { display: inline-block; }
1 I have some content 2 I have some content 3 I have some content 4 I have some content 5 I have some content 6 I have some content 7 I have some content 8 I have some content 9 I have some content 10 I have some content 11 I have some content 12 I have some content
//Pagination pageSize = 8; showPage = function(page) { $('.line-content').hide(); $('.line-content:gt('+((page-1)*pageSize)+'):lt('+(page)*(pageSize-1)+')').show(); $('.line-content:eq('+((page-1)*pageSize)+')').show(); } var pgs = Math.ceil($('.line-content').length/pageSize); var pgnt = ''; for(var i=1;i<=pgs;i++){ pgnt += ''+i+' '; } $('#pagin').html(pgnt); $("#pagin li a").click(function() { $("#pagin li a").removeClass("current"); $(this).addClass("current"); showPage(parseInt($(this).text())) }); showPage(1);
.current { color: green; } #pagin li { display: inline-block; }
1 I have some content 2 I have some content 3 I have some content 4 I have some content 5 I have some content 6 I have some content 7 I have some content 8 I have some content 9 I have some content 10 I have some content 11 I have some content 12 I have some content
//Pagination pageSize = 8; var pageCount = $(".line-content").length / pageSize; for(var i = 0 ; i'+(i+1)+' '); } $("#pagin li").first().find("a").addClass("current") showPage = function(page) { $(".line-content").hide(); $(".line-content").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); } showPage(1); $("#pagin li a").click(function() { $("#pagin li a").removeClass("current"); $(this).addClass("current"); showPage(parseInt($(this).text())) });
.current { color: green; } #pagin li { display: inline-block; }
1 I have some content 2 I have some content 3 I have some content 4 I have some content 5 I have some content 6 I have some content 7 I have some content 8 I have some content 9 I have some content 10 I have some content 11 I have some content 12 I have some content
如果您希望在html中附加标记，可以使用这些代码进行分页。
var paginationfooter = {}; paginationfooter.Pager = function() { this.currentPage = 1; this.pagingnumber = "#pagingnum"; this.tagg = "#matn"; this.numPages = function() { var numPages = 0; if (this.paragraphs != null && this.limit != null) { numPages = Math.ceil(this.paragraphs.length / this.limit); } return numPages; }; this.showPage = function(page) { this.currentPage = page; var html = ""; for (var i = (page-1)*this.limit; i < ((page-1)*this.limit) + this.limit; i++) { if (i < this.paragraphs.length) { var disply = this.paragraphs.get(i); html += "<" + disply.tagName + ">" + disply.innerHTML + ""; } } $(this.tagg).html(html); pagenuming(this.pagingnumber, this.currentPage, this.numPages()); } var pagenuming = function(container, currentPage, numPages) { var paging = $(""); var gridpaging = ""; for (var i = 1; i <= numPages; i++) { if (i != currentPage) { gridpaging += "- " + i + "
"; } else { gridpaging += "- " + i + "
"; } } gridpaging += "
"; paging.append(gridpaging); $(container).html(paging); } } //---------------------------here input values var pager = new paginationfooter.Pager(); $(document).ready(function() { pager.limit = 5; pager.pagingtag = $('#matn'); pager.paragraphs = $('p', pager.pagingtag); pager.showPage(1); });