利用jquery代码做一个简单的分页功能

具体实现代码如下：

$(document).ready(function() {
  for (var i = 1; i < 21; i++) {
    $("#content").append("<li>" + i + "</li>");
  }
  $every_page = 5;
  $items = $("ul li");
  $total_all = $items.length; //总条数
  $page_num = Math.round($total_all / $every_page) //向上取整（2.5 ==> 3）

  $("#total_page").text($page_num);
  //初始化页面，只显示前5条。
  $("ul li:gt(" + ($every_page - 1) + ")").each(function() {
    $(this).hide();
  })
  //点击下一条按钮函数。
  $("#next_page").click(function() {
    $current_page = ($("#current_page").text()); //获取当前页码
    if ($current_page < $page_num) {
      $("#current_page").text(++$current_page);
      $.each($("ul li"), function(index, item) {
        //获取下一页显示的开始索引。
        var start = ($("#current_page").text() - 1) * $every_page;
        if (index >= start && index < start + $every_page) {
          $(this).show();
        } else {
          $(this).hide();
        }
      })
    } else {
      return false;
    }
  })
  $("#pre_page").click(function() {
    $current_page = ($("#current_page").text());
    if ($current_page > 1) {
      $("#current_page").text(--$current_page);
      $.each($("ul li"), function(index, item) {
        var start = ($("#current_page").text() - 1) * $every_page;
        if (index >= start && index < start + $every_page) {
          $(this).show();
        } else {
          $(this).hide();
        }
      })
    } else {
      return false;
    }
  })
})

jQuery中child选择器语法示例

jQuery语法如何获得radio的值

jQuery代码如何移除table指定行

标签： jQuery代码, jquery分页

上面是“利用jquery代码做一个简单的分页功能”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13893.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！