bootstrap-table分页（web前端）

作者: 新世纪好青年 | 来源:发表于2019-08-08 16:44 被阅读0次

bootstrap-table分页（web前端）
bootstrap-table 前端分页
Bootstrap-Table的Web表格进阶---实时编辑
web前端设置分页label
Mybatis分页插件PageHelper的配置和使用方法
Bootstrap-table分页表格用法
APP分页服务端设计
浅谈APP流式分页服务端设计
手写一个前端分页的方法
Web前端常用插件相关文章总结

bootstrap-table插件，有分页，有可跳转至，先附上效果图

1565253292(1).png

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh.js"></script>
        <script type="text/javascript" src="js/pagejump.js"></script>

        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
        <link rel="stylesheet" type="text/css" href="css/pagejump.css" />
    </head>

    <body style="padding: 30px;">
        <table id="table" class="table table-hover" data-height="500" data-show-jump-to="true" data-pagination="true">
            <thead>
                <tr>
                    <th>项目1</th>
                    <th>项目1</th>
                    <th>项目1</th>
                    <th>项目1</th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>

        <script type="text/javascript" src="js/index.js"></script>
    </body>

</html>

这部分直接新建一个js文件引入即可

(function($) {
    'use strict';
    $.extend($.fn.bootstrapTable.defaults, {
        // 默认不显示
        paginationShowPageGo: false
    });

    $.extend($.fn.bootstrapTable.locales, {
        pageGo: function() {
            // 定义默认显示文字，其它语言需要扩展
            return '跳转至';
        }
    });
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initPagination = BootstrapTable.prototype.initPagination;

    // 扩展已有的初始化分页组件的方法
    BootstrapTable.prototype.initPagination = function() {
        _initPagination.apply(this, Array.prototype.slice.apply(arguments));
        // 判断是否显示跳转到指定页码的组件
        if(this.options.paginationShowPageGo) {
            var html = [];
            // 渲染跳转到指定页的元素
            html.push(
                '<ul class="pagination-jump">',
                '<li class=""><span>' + this.options.pageGo() + ':</span></li>',
                '<li class=""><input style="margin-left: 1px;margin-right: 1px;border-radius: 4px;" type="text" class="page-input" value="' + this.options.pageNumber + '"   /></li>',
                '<li class=""><span style="padding-left: 3px;">页</span></li>',
                '<li class="page-go"><a class="jump-go" href="" style="border-radius: 4px;">跳转</a></li>',
                '</ul>');

            // 放到原先的分页组件后面
            this.$pagination.find('ul.pagination').after(html.join(''));
            // 点击按钮触发跳转到指定页函数
            this.$pagination.find('.page-go').off('click').on('click', $.proxy(this.onPageGo, this));
            // 手动输入页码校验，只允许输入正整数
            this.$pagination.find('.page-input').off('keyup').on('keyup', function() {
                this.value = this.value.length == 1 ? this.value.replace(/[^1-9]/g, '') : this.value.replace(/\D/g, '');
            });
        }
    };

    // 自定义跳转到某页的函数
    BootstrapTable.prototype.onPageGo = function(event) {
        // 获取手动输入的要跳转到的页码元素
        var $toPage = this.$pagination.find('.page-input');
        // 当前页不做处理
        if(this.options.pageNumber === +$toPage.val()) {
            return false;
        }
        // 调用官方的函数
        this.selectPage(+$toPage.val());
        return false;
    };
})(jQuery);

$(function() {
    for(var i = 0; i < 45; i++) {
        var html = '<tr>';
        html += '<td>' + i + '</td>';
        html += '<td>123</td>';
        html += '<td>2019-08-01至2019-08-31</td>';
        html += '<td>456</td>';
        html += '</tr>';
        $("#tbody").append(html);
    }
    $('#table').bootstrapTable({
        striped: true, // 是否显示行间隔色
        pageSize: "10",
        pagination: true, // 是否分页
        showPaginationSwitch: false,
        pageList: [],
        paginationShowPageGo: true
    });
})

css部分

.pagination-jump {
    margin: 0;
}

.pagination-jump {
    display: inline-block;
    padding-left: 1px;
    border-radius: 4px;
}

.pagination-jump>li {
    display: inline;
}

.pagination-jump>li>a, .pagination-jump>li>input, .pagination-jump>li>span {
    position: relative;
    float: left;
    margin-left: -1px;
    line-height: 1.42857143;
    color: rgba(102, 156, 254, 1);
    text-decoration: none;
    background-color: #fff;
}

.pagination-jump>li>a {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination-jump>li>input {
    padding: 6px 0px;
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 36px;
    text-align: center;
}

.pagination-jump>li>span{
    padding: 6px 3px 6px 12px;
}


.pagination-jump>li>.jump-go {
    margin-left: 0;
    padding: 6px;
}