Jquery中的动态分页答案

【问题标题】：Dynamic pagination in JqueryJquery中的动态分页
【发布时间】：2015-11-02 09:57:24
【问题描述】：

我有这个代码：

//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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">
            <li><a class="current" href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
</ul>

我希望数字根据要显示的 div 的数量自动生成，而不是在我的 HTML 文件中手动写入数字。

我的代码有效，但第 3 页和第 4 页中没有任何内容。我不想更新 HTML 文件中的数字，而是希望它们使用 Jquery 动态更改

【问题讨论】：

任何人都知道如何添加prv和next按钮

标签： javascript jquery pagination jquery-pagination

【解决方案1】：

计算页面计数而不是通过循环创建页面链接。

//Pagination
	pageSize = 8;

	var pageCount =  $(".line-content").length / pageSize;
    
     for(var i = 0 ; i<pageCount;i++){
        
       $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
     }
        $("#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">
         
</ul>

【讨论】：

您的解决方案很容易理解，我也尝试使用您的解决方案并生成分页。但是你能不能帮我在我的数据库中存储超过 4000 个数据，或者超过，所以我想要这样的分页首先和最后一个分页，所以知道如何做到这一点

【解决方案2】：

您需要使用Math.ceil($(".line-content").size() / pageSize)统计页面，然后为每个页面动态添加<li>。

我已将初始化代码移动到 $() 中（即 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('<li><a class="current" href="#">' + (i + 1) + '</a></li>');
    else
      $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li>');
  }


  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">

</ul>

【讨论】：

【解决方案3】：

将其放置在 DOM 准备好时执行的某个位置，但在添加 click 事件处理程序之前。

//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 += '<li><a href="#">' + i + '</a></li>');
}
$('#pagin').html(buttons);

然后您可以将#pagin 留空，JavaScript 会为您填充：

<ul id="pagin">
</ul>

免责声明：我没有测试过这段代码。

【讨论】：

【解决方案4】：

//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 += '<li><a href="#">'+i+'</a></li>';
}
$('#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">

</ul>

这符合您的需要。

【讨论】：

【解决方案5】：

//Pagination
	pageSize = 8;

	var pageCount =  $(".line-content").length / pageSize;
    
     for(var i = 0 ; i<pageCount;i++){
        
       $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
     }
        $("#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>

<ul id="pagin">
         
</ul>

【讨论】：

您应该对添加到解决方案中的内容添加一些评论。

【解决方案6】：

如果您想在 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 + "</" + disply.tagName + ">";
            }
        }
        
        $(this.tagg).html(html);
        
        pagenuming(this.pagingnumber, this.currentPage, this.numPages());
    }
    
    var pagenuming = function(container, currentPage, numPages) {
		var paging = $("<div class='pagination'></div>");
		
        var gridpaging = "<ul>";
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                 gridpaging += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>";
            } else {
                gridpaging += "<li>" + i + "</li>";
            }
        }

        gridpaging += "</ul>";
		

	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);
});

【讨论】：

【解决方案7】：

pageSize = 5;

var pageCount =  $(".setPagination").length / pageSize;

for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}
$("#pagin li").first().addClass("active")
showPage = function(page) {
    $(".setPagination").hide();
    $(".setPagination").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}
showPage(1);

$("#pagin li").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    showPage(parseInt($(this).text())) 
});

}

【讨论】：

你能解释一下吗？