jQuery实战教程 jQuery实现仿Bootstrap-Table的分页效果解析
沉沙 2018-07-24 来源 : 阅读 1595 评论 0

摘要:本篇jQuery教程探讨了jQuery实现仿Bootstrap-Table的分页效果,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

概述

出于练习的目的,使用jquery模仿了BootstrapTable的分页效果;

实现

计算总页数

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

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

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

计算当前页码

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

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

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

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

页码列表展示

根据当前数据条数是否大于等于总数据条数,若大于等于则隐藏,反之显示或者是判断表格数据的长度是否小于等于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><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

    }

];


本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程