您的位置：首页 > Web前端 > JQuery

一种jquery插件方式的分页

2014-01-22 20:54 211 查看

在检索了不下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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 分页 pagination

相关文章推荐

新的分享

章节导航