美文网首页jQuery学习笔记
JQuery实现仿Bootstrap-Table的分页效果

JQuery实现仿Bootstrap-Table的分页效果

作者: 小人物的秘密花园 | 来源:发表于2018-04-26 18:01 被阅读13次

    概述

    最近项目中使用到分页组件，出于练习的目的，使用jquery模仿了BootstrapTable的分页效果；

    实现

    1. 计算总页数

    总页数 = 数据总条数 / 每页显示的数据条数， 结果向上取整

    1. 计算数据开始位置、结束位置

    开始位置 = （当前页码 - 1）* 当前展示的数据条数 + 1
    结束位置 = 当前页码 * 当前展示的数据条数

    1. 计算当前页码

    当点击上一页，当前页码减一，当页码值等于第一页的页码值时，将当前页码置为最后一页的页码值；
    当点击下一页，当前页码加一，当页码值等于最后一页的页码值，则将当前页码值置为首页的页码值；

    1. 根据数据开始位置和结束为止，加载表格当前页的数据

    使用Array对象的slice(start，end),方法提取当前需要的表格数据；
    即是：
    arr.slice(start-1, end)
    减1的原因是源数据的索引是从0开始的，而本例中的数据开始位置是从1开始的；

    1. 每次改变数据条数的时候，将页码置为1

    2. 页码列表展示

    根据当前数据条数是否大于等于总数据条数，若大于等于则隐藏，反之显示或者是判断表格数据的长度是否小于等于1，若是则隐藏，反之显示；

    代码

    HTML

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分页组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="../css/index.css" />

</head>

<body>
    <table border="1" id="table">
        <thead>
            <tr>
                <th>item1</th>
                <th>item2</th>
                <th>item3</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="c-pagination">
        <div class="pagination-text">
            <div class="page-size">显示第<span class="start-num" id="startNum">0</span>到第<span class="end-num" id="endNum">0</span>条记录，总共<span class="total" id="total">0</span>条记录</div>
            <div class="page-list">
                每页显示<select name="" id="changeNumber">
                  <option value="0">10</option>
                  <option value="1">25</option>
                  <option value="2">50</option>
                  <option value="3">100</option>
                  
                </select>条记录
            </div>
        </div>
        <ul class="pagination-number" id="paginationList">
            <li class="prev" id="prev">
                <span>‹</span>
            </li>
            <li class="next" id="next">
                <span>›</span>
            </li>
        </ul>
    </div>
    <script src="../js/jquery/jquery-3.3.1.min.js"></script>
    <script src="../js/vender/index.js"></script>
</body>

</html>

    CSS

    下列样式为index.css文件中的样式：

    html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Microsoft YaHei';
}

* {
    padding: 0;
    margin: 0;
}

ul li {
    list-style: none;
}

table {
    margin: 10px 0;
    width: 100%;
    min-height: 500px;
    border-collapse: collapse;
    border-color: #ccc;
    color: #808696;
}

table th,
table tr {
    width: calc(100% / 3);
}

table tbody th:nth-child(2n) {
    background: #eee;
}

.c-pagination {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 10px 0;
    height: 54px;
}

.pagination-text {
    flex: 1;
    display: -webkit-flex;
    height: 54px;
    line-height: 54px;
    padding-left: 5px;
    box-sizing: border-box;
}

.pagination-text .page-size {
    display: inline-block;
    margin-right: 5px;
    height: 54px;
    line-height: 54px;
    font-size: 12px;
}

.pagination-text .page-size span {
    display: inline-block;
    padding: 0 3px;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    font-family: 'Microsoft YaHei';
    color: #333;
}

.pagination-text .page-list {
    display: inline-block;
    height: 54px;
    line-height: 54px;
    font-family: 'Microsoft YaHei';
    font-size: 12px;
}

.pagination-text .page-list select {
    display: inline-block;
    background-color: #fff;
    border-color: #ccc;
    font-size: 12px;
    padding: 6px 12px;
    margin-top: -10px;
    margin-right: 3px;
    margin-left: 3px;
    color: #808696;
}

.pagination-text .page-list select:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.pagination-number {
    flex: 1;
    height: 54px;
    line-height: 54px;
    vertical-align: middle;
    text-align: right;
    padding-right: 5px;
    box-sizing: border-box;
    align-self: flex-end;
}

.pagination-number li {
    display: inline-flex;
    align-content: center;
}

.pagination-number li span {
    display: block;
    flex: 1;
    font-size: 12px;
    position: relative;
    font-family: 'Microsoft YaHei';
    padding: 6px 12px;
    margin-left: -6px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
}

.pagination-number li:hover span {
    background-color: #eee;
    border-color: #ddd;
    color: #1181D9 !important;
}

.pagination-number li.active span {
    border-color: #337ab7;
    color: #1181D9 !important;
    margin-right: 6px;
}

.pagination-number li.prev span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination-number li.next span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

    注意： table的样式可以调整

    JS

    下面的脚本代码为index.js文件的内容：

    var pagination = {
    // 表体数据
    data: data,
    // 总条数
    total: 0,
    // 总页数
    totalPages: 0,
    // 当前页码
    pageNumber: 1,
    // 每页数据条数
    pageSize: 10,
    // 开始数据的位置
    start: 1,
    // 结束数据的位置
    end: 10,
    // 可供选择的每页的行数
    pageList: [10, 25, 50, 100],
    init: function(opt) {
        var that = this;
        // 计算总条数
        that.total = that.data.length;
        opt.totalNum.html(that.total);
        that.loadPageData(opt, that);
        // 计算页数
        that.calculateNumberList(opt);
        that.showTableData(opt);
        opt.startNum.html(that.start);
        opt.endNum.html(that.end);
        // 改变数据条数
        opt.changeList.on('change', function(e) {
            var _this = this;
            that.pageNumber = 1;
            that.changeNumber(that, _this, opt);

        });
        // 上一页
        opt.paginationList.find("li.prev").on('click', function() {
            var _this = this;
            $(_this).siblings().removeClass('active');
            $(_this).removeClass("active");
            if (that.pageNumber == 1) {
                that.pageNumber = that.totalPages;
            } else {
                that.pageNumber--;
            }
            that.loadPageData(opt, that);
            var page = opt.paginationList.find("li.page");
            for (let i = 0; i < page.length; i++) {
                if (i == that.pageNumber - 1) {
                    $(page[i]).addClass("active");
                }
            }
            that.showTableData(opt);
        });
        // 下一页
        opt.paginationList.find("li.next").on('click', function() {
            var _this = this;
            $(_this).siblings('li').removeClass("active");
            $(_this).removeClass("active");
            if (that.pageNumber == that.totalPages) {
                that.pageNumber = 1;
            } else {
                that.pageNumber++;
            }
            that.loadPageData(opt, that);
            var page = opt.paginationList.find("li.page");
            for (let i = 0; i < page.length; i++) {
                if (i == that.pageNumber - 1) {
                    $(page[i]).addClass("active");
                }
            }
            that.showTableData(opt);
        });

    },
    // 改变开始位置，结束位置
    loadPageData: function(opt, that) {
        that.start = (that.pageNumber - 1) * that.pageSize + 1;
        that.end = that.pageNumber * that.pageSize;
        if (that.end > that.total) {
            that.end = that.total;
        }
        opt.startNum.html(that.start);
        opt.endNum.html(that.end);
    },
    // 计算页码数量
    calculateNumberList: function(opt) {
        var that = this;
        // 计算总的页数 = 数据总条数 / 每页显示的条数
        that.totalPages = Math.ceil(that.total / that.pageSize);
        // 创建页数标签
        opt.paginationList.find("li.page").remove();
        if (that.pageSize >= that.total || that.data.length <= 1) {
            opt.paginationList.hide();
        } else {
            opt.paginationList.show();
            for (let i = 0; i < that.totalPages; i++) {
                opt.next.before("<li class='page'><span>" + parseInt(i + 1) + "</span></li>");
            }
            opt.paginationList
                .find("li:nth-child(2)")
                .addClass("active");
        }
        // 点击页码改变数据
        opt.paginationList.find("li.page").on("click", function() {
            var _this = this;
            var _this = this;
            $(_this)
                .siblings()
                .removeClass("active");
            $(_this).addClass("active");
            that.pageNumber = parseInt(
                $(_this)
                .find("span")
                .text()
            );
            that.loadPageData(opt, that);
            that.showTableData(opt);

        });
    },
    // 展示表格数据
    showTableData: function(opt) {
        var arr = [],
            that = this,
            len;
        arr = that.data.slice(that.start - 1, that.end);
        that.initTable(opt, arr);

    },
    initTable(opt, arr) {
        opt.table
            .find("tbody")
            .find("tr")
            .remove();
        arr.forEach(function(item, index) {
            var oTr = $("<tr></tr>");
            for (let key in item) {
                oTr.append("<td>" + item[key] + "</td>");
            }
            opt.table.find("tbody").append(oTr);
        });
    },
    changeNumber: function(that, target, opt) {
        that.pageSize = parseInt($(target)
            .find("option:selected")
            .text());
        if (that.pageSize >= that.total) {
            that.pageSize = that.total
            that.start = 1;
            that.pageNumber = 1
        }
        that.loadPageData(opt, that);
        that.calculateNumberList(opt);
        that.showTableData(opt);
    }
};

window.onload = function() {
    var option = {
        startNum: $(".start-num"),
        endNum: $(".end-num"),
        totalNum: $(".total"),
        changeList: $("#changeNumber"),
        paginationList: $("#paginationList"),
        prev: $(".prev"),
        next: $(".next"),
        table: $('#table')
    };
    pagination.init(option);
};

    数据

    案例数据如下：

    var data = [{
        item1: 1,
        item2: 3,
        item3: 4
    },
    {
        item1: 4,
        item2: 5,
        item3: 6
    },
    {
        item1: 7,
        item2: 8,
        item3: 9
    },
    {
        item1: 10,
        item2: 11,
        item3: 12
    },
    {
        item1: 13,
        item2: 14,
        item3: 15
    },
    {
        item1: 16,
        item2: 17,
        item3: 18
    },
    {
        item1: 19,
        item2: 20,
        item3: 21
    },
    {
        item1: 22,
        item2: 23,
        item3: 24
    },
    {
        item1: 25,
        item2: 26,
        item3: 27
    },
    {
        item1: 27,
        item2: 29,
        item3: 30
    },
    {
        item1: 31,
        item2: 32,
        item3: 33
    },
    {
        item1: 34,
        item2: 35,
        item3: 36
    },
    {
        item1: 37,
        item2: 38,
        item3: 39
    },
    {
        item1: 40,
        item2: 41,
        item3: 42
    },
    {
        item1: 43,
        item2: 44,
        item3: 45
    },
    {
        item1: 46,
        item2: 47,
        item3: 48
    },
    {
        item1: 49,
        item2: 50,
        item3: 51
    },
    {
        item1: 52,
        item2: 53,
        item3: 54
    },
    {
        item1: 55,
        item2: 56,
        item3: 57
    },
    {
        item1: 58,
        item2: 59,
        item3: 60
    },
    {
        item1: 61,
        item2: 62,
        item3: 63
    },
    {
        item1: 64,
        item2: 65,
        item3: 66
    },
    {
        item1: 67,
        item2: 68,
        item3: 69
    },
    {
        item1: 7,
        item2: 8,
        item3: 9
    },
    {
        item1: 1,
        item2: 3,
        item3: 4
    },
    {
        item1: 4,
        item2: 5,
        item3: 6
    },
    {
        item1: 7,
        item2: 8,
        item3: 9
    },
    {
        item1: 1,
        item2: 3,
        item3: 4
    },
    {
        item1: 4,
        item2: 5,
        item3: 6
    },
    {
        item1: 7,
        item2: 8,
        item3: 9
    },
    {
        item1: 1,
        item2: 3,
        item3: 4
    },
    {
        item1: 4,
        item2: 5,
        item3: 6
    },
    {
        item1: 7,
        item2: 8,
        item3: 9
    },
    {
        item1: 1,
        item2: 3,
        item3: 4
    },
    {
        item1: 4,
        item2: 5,
        item3: 6
    },
    {
        item1: 7,
        item2: 8,
        item3: 9
    }
];

    效果

    pagination.GIF

    相关文章

      网友评论

        本文标题：JQuery实现仿Bootstrap-Table的分页效果

        本文链接：https://www.haomeiwen.com/subject/gqemlftx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        jQuery学习笔记

        关于我们|服务条款|联系我们|JQuery实现仿Bootstrap-Table的分页效果|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！