简体   繁体   English

使用下一个,上一个,最后一个和第一个按钮进行分页

[英]Pagination with next, previous, last, and first button

I'm a beginner in jQuery and I tried to make a pagination with next, previous, first, and last button, but I cannot. 我是jQuery的初学者,我尝试过使用next,previous,first和last按钮进行分页,但我做不到。

This is my code: 这是我的代码:

pageSize = 8;

var pageCount = $(".group").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) {
  $(".group").hide();
  $(".group").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())) 
});

It's not very clear what you're looking for, but I'm guessing you want next/previous links in your pagination links. 目前尚不清楚您要查找的内容,但我猜您想在分页链接中使用下一个/上一个链接。

First is very simple - just link to the page with index 0: 首先非常简单-只需链接到索引为0的页面即可:

$("#pagin").append('<li><a href="#" class="hidden" data-index="0">first</a></li>');

likewise last is just a link to the page count: 同样,最后一个只是指向页面数的链接:

$("#pagin").append('<li><a href="#" class="hidden" data-index="'+pageCount+'">last</a></li>');

prev/next pages will need you to store what the current page is: 上一页/下一页需要您存储当前页面是什么:

https://jsfiddle.net/cfqx3ba6/ https://jsfiddle.net/cfqx3ba6/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 表格分页:如何创建一个包含 10 个元素的表格并实现第一个、上一个、下一个和最后一个按钮? - Table Pagination : How can I create a table with 10 elements and implement first, previous, next and last button? 如何从twbs分页插件中删除“第一”,“上一个”,“下一个”和“最后”按钮 - how to remove 'first','previous','next' and 'last' buttons from twbs pagination plugin 如何在 Laravel 中禁用分页指示第一页、最后一页和指示上一页、下一页 - How to disable pagination indicately first page, last page & indicately previous page, next page in Laravel Angular Ionic 中的分页,带有下一个和上一个按钮 - Pagination in Angular Ionic with next and previous button 如何仅在第一页(div)上隐藏“上一个”按钮并在最后一页(div)上隐藏“下一个按钮” - How to hide “previous” button only on first page (div) and hide “next button” on last page (div) 分别到达最后一张和第一张幻灯片后,如何使“下一个”按钮和“上一个”按钮不起作用? - How to make Next button and Previous button non-working after I reach last and first slide respectively? 如何从第一页删除上一个按钮,从最后一页删除下一个按钮? - How to remove previous button from first page and next button from last page? 如何获得上一个/下一个 | 使用 list.js 分页的第一个/最后一个按钮 - How to get a prev/next | first/last button to work with list.js pagination 如何在Datatable中检测完全分页类型中的第一个,上一个,下一个,最后一个按钮 - How to detect first,previous,next,last button clicked in full pagingtype in Datatable 如何使用带有ajax的First Next Previous Last按钮从mysql一个接一个地访问详细信息? - How to access details one by one from mysql using First Next Previous Last button with ajax?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM