jQuery学习笔记

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

2018-04-26  本文已影响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
上一篇 下一篇

猜你喜欢

热点阅读