ES6 written by paging => ajax realization (has been resolved and more bug)

In fact, paging heard before, but I do not know what demand; today taking advantage of the free, 

wrote a page about es6, if a friend is not familiar with the es6 can be converted to es5 syntax 



for this small paging function can make a few requirements: 

　　Page the first page is loaded with ajax content displayed; 
　　the number of tasks each page request can be set freely; 
　　the code can be more reuse; 
　　click on the next page, previous page may not exceed the total number of pages; 
　　for the contents of the current page display for the serial number of the corresponding location, and click on the current serial number will not ask again. 
　　The number of pages can not do more indented, but not hard, and interested friends can try (up lazy)　　


Tools: 
　　guy to eat; bootstrap, jQuery (lazy magic); self-reference (no version limit)

 

Then there is the code to achieve,

//页面布局及样式   
<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>