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壳就可以

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

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

猜你喜欢

转载自blog.csdn.net/xxaann/article/details/90291160