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

超、凢脫俗 2022-05-09 05:33 345阅读 0赞

效果图：

![70][]

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

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

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

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

官网地址： [ http://bootstrap-table.wenzhixin.net.cn/zh-cn/][http_bootstrap-table.wenzhixin.net.cn_zh-cn]  
Github地址： [ https://github.com/wenzhixin/bootstrap-table][https_github.com_wenzhixin_bootstrap-table]

中文文档：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]

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

![20171205103415122][]

**2.2、在页面中引入插件**

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

![20171205104112461][]

![20171205104220673][]

还得引入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壳就可以

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>

[70]: /images/20220509/96ec04e161f4421cadb6850f4df78bf0.png
[http_www.bootcss.com]: http://www.bootcss.com/
[http_bootstrap-table.wenzhixin.net.cn_zh-cn]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
[https_github.com_wenzhixin_bootstrap-table]: https://github.com/wenzhixin/bootstrap-table
[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
[20171205103415122]: /images/20220509/092cef4d02194915b011ae9fd24b5dc9.png
[20171205104112461]: /images/20220509/fb61ddb2bb4947d396c1b2441c40e451.png
[20171205104220673]: /images/20220509/2fed86f4585d43c7b2ef8c65eaf59a42.png