bootstrap表格使用
bootstrap表格使用
第一点：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文件，完整的引入如下:
第二：使用方法：
1.写一个空的table壳就可以
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲tableL01').boot…(’#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,
});
转自：庭博 （侵权则删）
来源：CSDN
原文：https://blog.csdn.net/jintingbo/article/details/82924330