bootstrap-table插件使用总结

---

学习过程中，遇到的情况汇总，不定期更新

---

table字段自动排序失效

有时在table标签中设置了 data-sortable="true"或者在js中设置了sortable: true,表格列的排序功能还是用不了。有些网友说要编写后台代码，重新排序后在回传，感觉应该这个插件没这么low。找了半天，找到了原因，只需要把分页选项注释掉，即data-side-pagination这个选项不添加即可。

 

数据格式问题

需要将数据库返回数据转换成json特定格式，才能被bootstrap table插件读取。一般有两种，推荐使用一种标准一点的json对象格式，必须要有total和rows两个key，
{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
且键的名字必须与table设置columns的field值一样，才能读取到数据。

初始化时可以这么写

total = all_data.count()
rows = []
result = {"total":total,"rows":rows}

然后设定rows字典数组具体内容然后返回即可

 

各设置项含义

            url: '/Home/GetDepartment',         //请求后台的URL（*），url也可以直接指定数据源，必须为json格式
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表

载入数据

table的数据可以通过url指定，也可以在js代码中载入，载入的数据需符合数据格式

$("#table").bootstrapTable('load',result_data);

语言设置

table默认是英文的，如需中文需要设置locale属性为zh-CN同时要导入相应的js文件，有分语言的js，但最好在html页面的script里导入一个全的语言文件包。bootstrap-table-locale-all.min.js。这样可以随时切换。该文件可以在官网上下，试了一下github上的单独中文包，发现该文件打包错误，里面是html代码，也算官方的一个小bug