[英]jQuery pagination with dynamic pagination and next and previous buttons?
I am trying to create a pagination using jQuery. 我正在尝试使用jQuery创建一个分页。 the content of the pagination is generated via PHP so they are dynamic.
分页的内容是通过PHP生成的,因此它们是动态的。
I have put up a simple jQuery pagination together but the issue that I have with this is that I cannot come up with any solution for Next and Previous buttons and also, to create pagination (ie 1-2-3-4-5.. etc) dynamically based on the amount of content
. 我已经将一个简单的jQuery分页放在一起,但是我遇到的问题是我无法为Next和Previous按钮以及创建分页
(ie 1-2-3-4-5.. etc) dynamically based on the amount of content
提出任何解决方案(ie 1-2-3-4-5.. etc) dynamically based on the amount of content
。
at the moment, I am putting the 1-2-3 etc manually in my code using <li></li>
目前,我正在使用
<li></li>
在代码中手动输入1-2-3等
this is my jsfiddle code: 这是我的jsfiddle代码:
https://jsfiddle.net/q5rgLwb8/1/ https://jsfiddle.net/q5rgLwb8/1/
and this is my entire code: 这是我的整个代码:
itemperPage = 2;
showPage = function(page) {
$(".mypro").hide();
$(".mypro").each(function(n) {
if (n >= itemperPage * (page - 1) && n < itemperPage * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
any help would be appreciated. 任何帮助,将不胜感激。
Here is your fiddle edited : 这是您的小提琴编辑:
initPagination = function(itemPerPage) {
console.log(itemPerPage);
var nbContent = $(".mypro").length;
var nbPage = Math.ceil(nbContent/itemPerPage);
var contentPagination = $('#pagin');
var classLi = '';
for(var i = 1; i <= nbPage; i++) {
classLi = i == 1 ? 'current' : '';
contentPagination.append('<li class="'+classLi+'"><a href="#">'+i+'</a></li>');
}
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
}
https://jsfiddle.net/q5rgLwb8/2/ https://jsfiddle.net/q5rgLwb8/2/
The principle is to create you LI based on the number on div you have and the number of content you want to be display by page. 原理是根据您拥有的div上的数字和要按页面显示的内容数来创建LI。 Then bind your LI for the pagination to be working.
然后绑定您的LI,以便分页正常工作。
To make the "next" and "prev" Button you can use the class you add on the current page. 要制作“下一个”和“上一个”按钮,您可以使用在当前页面上添加的类。
You can replace your items with this code (put it after showPage(1); ): 您可以使用以下代码替换项(将其放在showPage(1);之后):
$('.mypro').each(function (index, value) {
$('#pagin').append(
"<li value="
+ (index + 1)
+ "><a href='#'>"
+ $(this).text()
+ "</a></li>");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.