一种jquery插件方式的分页

最新推荐文章于 2024-08-27 09:13:38 发布

未济2019

最新推荐文章于 2024-08-27 09:13:38 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 分页 pagination

本文链接：https://blog.youkuaiyun.com/lizhe_dashuju/article/details/18673173

本文介绍了一款基于jQuery的高效分页插件，并通过实例展示了如何使用该插件实现网页内容的分页显示。该插件具备高度的灵活性及易用性，支持自定义每页显示条目数量、导航按钮文本等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在检索了不下50种分页机制之后，我认为最佳的分页是这个：
http://tutorials.ajaxmasters.com/pagination-demo/
自由度最大，写的也最清晰，它是基于jquery的。
但例子不够好，太繁琐了，其实只要说明下参数就行，我用jquery 1.10重写了一下。

需要4个文件，index.html，jquery.pagination.js, members.js, pagination.css，后面三个文件跟原作一样，index.html内容如下：

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="pagination.css"/>
  <script type="text/javascript" src=" http://code.jquery.com/jquery-1.10.1.min.js "></script>
  <script type="text/javascript" src="jquery.pagination.js"></script>
  <script type="text/javascript" src="members.js"></script>
  <script>
    $(function(){
      var items_per_page_1 = 20;
      function pageselectCallback(page_index, jq){
        var items_per_page = items_per_page_1;
        var max_elem = Math.min((page_index+1) * items_per_page, members.length);
        var newcontent = '';

        for(var i=page_index*items_per_page;i<max_elem;i++){
          newcontent += '<dt>' + members[i][0] + '</dt>';
          newcontent += '<dd class="state">' + members[i][2] + '</dd>';
          newcontent += '<dd class="party">' + members[i][3] + '</dd>';
        }

        $('#Searchresult').html(newcontent);
        return false;
      }

      var opt =
      {
        callback: pageselectCallback,
        items_per_page: items_per_page_1,
        num_display_entries: 10,
        num_edge_entries: 2,
        prev_text: "Prev",
        next_text: "Next",
      };

      $("#Pagination").pagination(members.length, opt);
    });
  </script>
</head>

<body>
  <div id="content">
    <h1>jquery pagination plugin</h1>
    <div id="Pagination" class="pagination">
    </div>

    <br style="clear:both;"/>

    <h3>List of members</h3>

    <dl id="Searchresult">
      <dt>search result will be inserted here...</dt>
    </dl>

  </div>

</body>
</html>