手动实现分页

发表于 | 分类于 |

简单分页功能实现

一次取出所有的数据，适用于数据量较少的情景

数据表 table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table id="sample-table-1">
  <thead>
    <tr>
      <th>序号</th>
      <th>问题编号</th>
      <th>问题说明</th>
      <th>问题类型</th>
      <th>所属主题</th>
      <th>UPDATOR</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
  </tbody>
</table>
底部页数 有一个页数选择器 bootstrap 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="row" id="pager">
  <div class="col-sm-5 col-sm-offset-1">
    <label for="pageColumnNumber">共&nbsp;${fn:length(questions)}&nbsp;条,&nbsp;每页显示
    <select class="select-small" id="pageColumnNumber"
            onchange="changePageColumnNumber()">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
    行 &nbsp;&nbsp;&nbsp;共 &nbsp;<label id="totalPage"></label>&nbsp;页
    </label>
  </div>
  <div class="col-sm-6">
    <nav aria-label="Page navigation">
      <ul class="pagination" id="pagenationUL">
        <li onclick="arrowPager(1)"><a href='####'>&laquo;</a></li>
        <li onclick="toPage(1)"><a href='####'>1</a></li>
        <li onclick="toPage(2)"><a href='####'>2</a></li>
        <li onclick="toPage(3)"><a href='####'>3</a></li>
        <li onclick="toPage(4)"><a href='####'>4</a></li>
        <li onclick="toPage(5)"><a href='####'>5</a></li>
        <li onclick="arrowPager(0)"><a href='####'>&raquo;</a></li>
      </ul>
    </nav>
  </div>
</div>
js 功能实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script type="text/javascript">
    var pageColumnNumber = 10;
    var currentPage = 1;
    var begin = 0;
    var currentPageColumn = 0;
    var totalColumnNumber = 0;
    var totalPage = 0;
    jQuery(function ($) {
        initPageTable();
    });
    function arrowPager(flag) {
        if (flag == 1) {
            if (currentPage == 1) return;
            currentPage = currentPage - 1;
        } else {
            if (currentPage == totalPage) return;
            currentPage = currentPage + 1;
        }
        begin = (currentPage - 1) * pageColumnNumber + 1;
        currentPageColumn = currentPage * pageColumnNumber > totalColumnNumber ? (totalColumnNumber - begin + 1 ) : pageColumnNumber;
        showTable();
        showPager();
    }
    function toPage(i) {
        var nextPage = parseInt($("#pagenationUL li:eq(" + i + ") a").text());
        if (isNaN(nextPage)) {
            return;
        }
        currentPage = nextPage;
        begin = (currentPage - 1) * pageColumnNumber + 1;
        currentPageColumn = currentPage * pageColumnNumber > totalColumnNumber ? (totalColumnNumber - begin + 1 ) : pageColumnNumber;
        showTable();
        showPager();
    }
    function showPager() {
        $("#pagenationUL li").removeClass("active");
        $("#pagenationUL li").removeClass("disabled");
        $("#pagenationUL li").show();
        if (totalPage < 6 || currentPage < 4) {
            initPager(1);
            $("#pagenationUL li:gt(" + totalPage + ")").hide();
            $("#pagenationUL li:eq(6)").show();
            $cur = $("#pagenationUL li:eq(" + currentPage + ")");
            $cur.addClass("active");
            $cur.html("<span>" + currentPage + "</span>");
        } else if (currentPage < (totalPage - 1)) {
            initPager(currentPage - 2);
            $cur = $("#pagenationUL li:eq(3)");
            $cur.addClass("active");
            $cur.html("<span>" + currentPage + "</span>");
        } else if (currentPage == (totalPage - 1)) {
            initPager(currentPage - 3);
            $cur = $("#pagenationUL li:eq(4)");
            $cur.addClass("active");
            $cur.html("<span>" + currentPage + "</span>");
        } else {
            initPager(currentPage - 4);
            $cur = $("#pagenationUL li:eq(5)");
            $cur.addClass("active");
            $cur.html("<span>" + currentPage + "</span>");
        }
        if (currentPage == 1) {
            $("#pagenationUL li:eq(0)").addClass("disabled");
            $("#pagenationUL li:eq(0)").html("<span>&laquo;</span>");
        }
        if (currentPage == totalPage) {
            $("#pagenationUL li:eq(6)").addClass("disabled");
            $("#pagenationUL li:eq(6)").html("<span>&raquo;</span>");
        }
    }
    function initPager(start) {
        $("#pagenationUL li:eq(0)").html("<a href='####'>&laquo;</a>");
        $("#pagenationUL li:eq(1)").html("<a href='####'>" + start + "</a>");
        $("#pagenationUL li:eq(2)").html("<a href='####'>" + (start + 1) + "</a>");
        $("#pagenationUL li:eq(3)").html("<a href='####'>" + (start + 2) + "</a>");
        $("#pagenationUL li:eq(4)").html("<a href='####'>" + (start + 3) + "</a>");
        $("#pagenationUL li:eq(5)").html("<a href='####'>" + (start + 4) + "</a>");
        $("#pagenationUL li:eq(6)").html("<a href='####'>&raquo;</a>");
    }
    function initPageTable() {
        currentPage = 1;
        pageColumnNumber = $("#pageColumnNumber").val();
        begin = (currentPage - 1) * pageColumnNumber + 1;
        totalColumnNumber = $("#sample-table-1").find("tr").length - 1;
        totalPage = Math.ceil(totalColumnNumber / pageColumnNumber);
        currentPageColumn = currentPage * pageColumnNumber > totalColumnNumber ? (totalColumnNumber - begin + 1 ) : pageColumnNumber;
        showTable();
        $("#totalPage").text(totalPage);
        showPager();
    }
    function changePageColumnNumber() {
        pageColumnNumber = $("#pageColumnNumber").val();
        initPageTable();
    }
    function showTable() {
        $("#sample-table-1 tr:gt(0)").hide();
        $("#sample-table-1 tr:gt(" + (begin - 1) + ")").filter(":lt(" + currentPageColumn + ")").show();
    }
</script>