Dynamic pagination in Jquery

前端未结

关注

 7  2167

佛祖请我去吃肉 2021-02-06 10:59

I have this code :

7条回答

我在风中等你 (楼主)

2021-02-06 11:30

You need to count the pages using Math.ceil($(".line-content").size() / pageSize), and then dynamically add

for each page.

I have moved the initialization code inside $() (i.e. the Ready Event).

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

0 讨论(0)

查看其它7个回答

热议问题