用ES6写分页=>ajax实现（已解决多bug）

其实分页之前听过，但不知道有什么需求；今天趁着有空，

写了一个关于es6的分页，如果有朋友不熟悉es6可以转换为es5语法



对于分页这个小功能可以提几点需求：

　　页面加载时用ajax显示的第一页内容；
　　页面每次请求的任务数可以自由设定；
　　代码可以多复用；
　　点击页面的下一页，上一页不能超过页面总数；
　　对于当前页面显示的内容，对于相应位置的序号，且点击当前序号不会再次请求。
　　这次没有做多页面数可以缩进，不过也不是很难，感兴趣的朋友可以试试（up懒）　　


使用工具：
　　吃饭的家伙；bootstrap，jQuery（偷懒神奇）；自行引用（没有版本限制）

接下来就是代码实现了，

//页面布局及样式   
<style type="text/css">
        .min {
            margin: 0 200px;
        }

        li {
            list-style: none;
        }

        #group {
            opacity: 0;
        }
    </style>

<div class="container">
    <ul class="list-group" id="group">
    </ul>
</div>

<nav aria-label="Page navigation" class="min" id="min">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

 1 //纯粹为了好看，在写这么多，其实实现分页不需要太多代码
 2 <script type="text/javascript">
 3     class GetShow {
 4         constructor() {
 5 
 6         }
 7 
 8         lay(_data, _index) {
 9             //每次请求五条数据
10             let _li = "", _t = 0;
11             _index = _index < 0 ? 0 : _index;
12             for (let i = _index; i < _data.length; i++) {
13                 _li += '<li>'+ i+ _data[i].article + '</li>';
14                 _t++;
15                 if (_t >= 5) {
16                     _t = 0;
17                     break;
18                 }
19             }
20             $("#group").prepend(_li).animate({opacity: 1});
21             $("#group li").addClass("list-group-item");
22         }
23         static load(_index) {
24             let _show = new GetShow();
25             $.ajax({
26                 url: "jsonpackage/article.json",
27                 success: function (_data, _status) {
28                     if (_status === "success") {
29                         _show.lay(_data, _index);
30                     }
31                 }
32             })
33         }
34     }
35 
36     function e() {
37         let _index = 0;
38         let $li = $("#min li").not($("#min li:first")).not($("#min li:last"));
39         let $liFirst=$("#min li:first");
40         let $liLast=$("#min li:last");
41         let _get = new GetShow();
42         let _mark=$li.index();
43         $li.click(function (e) {
44             e = e || window.event;
45             _mark=$(this).index();
46             //TODO:解决点击当前索引和页数相同时，会重复刷新,上传代码时才发现这里还有一个bug，当！5如何处理
47             if ($(this).index() === Math.floor((_index + 5) / 5)) {
48                 return false;
49             } else {
50                 $("#group").html("").css({opacity: 0});
51                 _index = 5 * $(this).index() - 5;
52                 GetShow.load(_index);
53             }
54         });
55 
56         $liFirst.click(function () {
57             if (_mark<=1){return false}
58             _mark=_mark-1;
59             $("#group").html("").css({opacity: 0});
60             _index = 5 * _mark - 5;
61             GetShow.load(_index);
62         });
63 
64         $liLast.click(function () {
65             _mark=_mark+1;
66             $("#group").html("").css({opacity: 0});
67             _index = 5 * (_mark) - 5;
68             GetShow.load(_index);
69         })
70     }
71 
72     function main() {
73         let _index = 0;
74         GetShow.load(_index);
75         e();
76     }
77 
78     window.onload = main;
79 </script>