首先我们需要去下载相应的 jquery bootstrap bootstrap-table的包。
注意bootstrap,下载编译过的压缩包中只有三个文件夹 css ,fonts, js
1. jquery-2.2.1.js ---- 最新的jquery文件
2. bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件
3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件
4.bootstrap-table-all.js ---最新bootstrap-table下的js文件
5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件
6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件
这六个必须配置,其中bootstrap-table-zh-CN.js是支持中文的js文件,只有加载了这个文件我们的一些表格显示信息才会被设置成中文。
1、引入js、css
2、table数据填充
bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据
第二种方式较第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。
//建议数据的格式以[{},{},{}]这种形式为主。否则的话排序方面会有bug
$('#id').bootstrapTable({
//url: influ_url,
data:data,
search: true,//是否搜索
pagination: true,//是否分页
pageSize: 5,//单页记录数
pageList: [5, 10, 20, 50],//分页步进值
sidePagination: "client",//服务端分页
searchAlign: "left",
searchOnEnterKey: false,//回车搜索
showRefresh: true,//刷新按钮
showColumns: true,//列选择按钮
buttonsAlign: "right",//按钮对齐方式
locale: "zh-CN",//中文支持
detailView: false,
showToggle:true,
sortName:'bci',
sortOrder:"desc",
columns: [
{
title: "",//标题
field: "",//键名
sortable: true,//是否可排序
order: "desc",//默认排序方式
align: "center",//水平
valign: "middle",//垂直
formatter: function (value, row, index) {
}
},
{
title: "",//标题
field: "",//键名
sortable: true,//是否可排序
order: "desc",//默认排序方式
align: "center",//水平
valign: "middle",//垂直
formatter: function (value, row, index) {
},
},
],
onCheck:function (row) {
},
onUncheck:function (row) {
},
onCheckAll:function (row) {
},
onUncheckAll:function (row) {
},
onClickCell: function (field, value, row, $element) {
}
onClickRow: function (rows, tr) {
},
});
此插件运用起来相当方便实用,还有很多方法和属性没有举例,大家可以参考
http://bootstrap-table.wenzhixin.net.cn/zh-cn/
此外大家也可以搜一下data-table这个插件,也不错。