分页的代码

Posted by Chen Blog on September 28, 2018

偶然需要自己写一个分页的功能。这里把我写的分页功能记录下来。方便下次写分页的是直接拿过来用就可以了。

直接上代码

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
// 页码
var page = 1;
var limit = 10;

/**
 * 设置页码
 */
function setpage(count,page) {
    $('#nav_page').html('');
    // 算出一共有多少页
    var all_page = Math.ceil(count / limit);
    var str = '';   // html字符串

    if(page > 1){
        str += '<li onclick="page = page-1; get_data();" class="page-item">\n' +
            '                                <a class="page-link" href="#" aria-label="Previous">\n' +
            '                                    <span aria-hidden="true">&laquo;</span>\n' +
            '                                    <span class="sr-only">上一页</span>\n' +
            '                                </a>\n' +
            '                            </li>';
    }
    if(all_page < 6){
        for(var i=1; i <= all_page ; i++){
            if(i == page){
                str += '<li class="page-item" ><a class="page-link" href="#" style="background: #b1c8f7; ">'+i+'</a></li>';
            }else{
                str += '<li class="page-item" onclick="page = '+ i +'; get_data();"><a class="page-link" href="#">'+i+'</a></li>';
            }

        }
    }else{
        var end = page + 2;
        // 页码的前面两个
        for(var i = page - 2; i <= end; i++){
            if(i <= 0){
                end += 1;
                continue;
            }
            if(i == page){
                str += '<li class="page-item" ><a class="page-link" href="#" style="background: #b1c8f7; ">'+i+'</a></li>';
            }else{
                str += '<li class="page-item" onclick="page = '+ i +'; get_data();"><a class="page-link" href="#">'+i+'</a></li>';
            }
        }
    }



    if(page < all_page){
        str += '<li onclick="page = page+1; get_data();" class="page-item">\n' +
            '                                <a class="page-link" href="#" aria-label="Next">\n' +
            '                                    <span aria-hidden="true">&raquo;</span>\n' +
            '                                    <span class="sr-only">Next</span>\n' +
            '                                </a>\n' +
            '                            </li>';
    }

    $('#nav_page').html(str);
}

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav >
    <ul id="nav_page" class="pagination justify-content-center">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>