解决bootstrap table表格插件所遇到的坑

最新推荐文章于 2024-08-17 01:00:00 发布

庭博

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量5.4w

点赞数 19

分类专栏： JAVA 庭博网校金庭波湖北荆门

本文链接：https://blog.csdn.net/jintingbo/article/details/82924330

版权

金庭波同时被 3 个专栏收录

86 篇文章 1 订阅

订阅专栏

JAVA

85 篇文章 3 订阅

订阅专栏

庭博网校

50 篇文章 0 订阅

订阅专栏

效果图：

第一点：bootstrap tab好用,并且是前端分页（就是不需要去读后台数据库来辅助分页）

你下载了bootstrap，不是你就有了bootstrap table插件，你还得要下载bootstrap table插件；

bootstrap下载地址：http://www.bootcss.com/

bootstrap table插件下载地址（下面3个有关）最好是从Github下载

官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Github地址： https://github.com/wenzhixin/bootstrap-table

中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

首先去github下载最新的版本，下载下来之后解压如下:

2.2、在页面中引入插件

复制dist目录下的文件到项目中去:

还得引入Bootstrap的样式与JS，和Jquery文件，完整的引入如下:

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/bootstrap-table.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script src="js/bootstrap-table.js"></script>

<script src="js/bootstrap-table-zh-CN.js"></script>

第二：使用方法：

1.写一个空的table壳就可以

<table class="table table-striped table-bordered table-hover" id="tableL01"></table>

2.在js中准备表头数据和表中的数据后用

$('#tableL01').bootstrapTable({}),就可以启动了，  注意此处的tableL01是你表格的id号，有时不出来数据，是因为在网上拷贝的代码后，没有改id号的原因，对初学者算是一个坑；

3.表头数据和表格内容的数据，都是以json的形式写在$('#tableL01').bootstrapTable({ //你的数据写在这里 });

4.在启动此表格之前，一定要先将以前的表格给清除掉，方法是：

$('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格
以上3、4两点合并起来就是先执行4，再执行3，

5.准备表头数据：

var tableColumns = [
    {field: 'name', title: '名称', sortable: true},
    {field: 'number', title: '编号', sortable: true},
];

6.准备表格内容数据：

var mydata=[
    {name:"aaaa",number:1111},
    {name:"bbbb",number:2222},
    ];

注意表格内容的name,number是与第5点中的field名字是相对应的，不然，你的表格显示不出内容。这算一个坑。

7.完整的$('#tableL01').bootstrapTable({})就应该这样写：

$('#tableL01').bootstrapTable({//表格初始化
    columns: tableColumns,  //表头
    data:mydata, //表格中的数据,这是从本地取得数据，如果是从后台取数据，就应该改为后台地址
});

8.要想达到前端分页的目的，还要加入以下参数：

$('#tableL01').bootstrapTable({//表格初始化
    columns: tableColumns,  //表头
    data:mydata, //通过ajax返回的数据
    width:300,
    height:268,
    method: 'get',
    pageSize: 3, //每页3条
    pageNumber: 1,  //第1页
    pageList: [10,25],   //在使用过程中根据情况调整每页条数.虽然你现在定义的每页3条，但你可以随时调整为10条或25条。
    cache: false,   //不缓存
    striped: true,
    pagination: true,
    sidePagination: 'client',
    search: false,
    showRefresh: false,
    showExport: false,
    showFooter: true,
    // exportTypes: ['csv', 'txt', 'xml'],
    clickToSelect: true,
});

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

完整的程序如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-table-develop/src/bootstrap-table.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

    <script type="text/javascript">
        $(function () {
            var tableColumns = [
                {field: 'name', title: '名称', sortable: true},
                {field: 'number', title: '编号', sortable: true},
                {field: 'classes', title: '类型', sortable: true},
                {field: 'standard', title: '规格', sortable: true},
                {field: 'managestaff', title: '专管员', sortable: true},
                {field: 'remark', title: '备注', sortable: true}
            ];
            var data1=[
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},

            ];
            $('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格

            $('#tableL01').bootstrapTable({//表格初始化
                columns: tableColumns,  //表头
                data:data1, //通过ajax返回的数据
                width:300,
                height:268,
                method: 'get',
                pageSize: 3,
                pageNumber: 1,
                pageList: [],
                cache: false,
                striped: true,
                pagination: true,
                sidePagination: 'client',
                search: false,
                showRefresh: false,
                showExport: false,
                showFooter: true,
                // exportTypes: ['csv', 'txt', 'xml'],
                clickToSelect: true,
            });

        });
    </script>
</head>
<body>

<div class="panel panel-default">
    <div class="panel-body table-responsive">
        　　　　　　　　　
        <div class="query-div" id="toolbar">
            <form class="form-inline" role="form" id="query_form">
                <div class="form-group query-form-group">
                    <label for="status">状态</label>
                    <select class="form-control" id="with_appr_status"
                    <option value="">全部</option>
                    <option value="S1">待处理</option>
                    <option value="S2">已处理</option>
                    </select>
                </div>
                <div class="form-group query-form-group">
                    <button type="button" class="btn btn-default" id="with_query">查询</button>
                </div>
            </form>
        </div>

        <table class="table table-striped table-bordered table-hover" id="tableL01">

        </table>
    </div>
</div>

</body>
</html>