jquery插件Bootstrap Table使用方法详解

一、概述

bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

Bootstrap table 通过简单的设置，就可以拥有强大的功能，大大提高工作效率，减少开发时间。

git项目地址：https://github.com/wenzhixin/bootstrap-table

主要功能：

• 支持 Bootstrap 3 和 Bootstrap 2
• 自适应界面
• 固定表头
• 非常丰富的配置参数
• 直接通过标签使用
• 显示/隐藏列
• 显示/隐藏表头
• 通过 AJAX 获取 JSON 格式的数据
• 支持排序
• 格式化表格
• 支持单选或者多选
• 强大的分页功能
• 支持卡片视图
• 支持多语言
• 支持插件

二、使用方法

1.引入js、css

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2.table数据填充
bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据。
html

<table id="table" data-toggle="table"></table>

js
local本地数据：

$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});

remote远程数据：

可以通过设置远程的 url 如 url: 'data1.json' 来加载数据。

<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>

实例代码片段：

getTable:function(url){
var $table = $("#bTable");
$table.bootstrapTable({
url: url,
sidePagination: 'server', //服务端分页
pagination: true,
pageSize: 10,
pageList: [5, 10, 20],
columns: [
{field: 'houseUserId', title: 'houseUserId',visible:false},
{field: 'id', title: '序号', formatter: rowIndex},
{field: 'houseName', title: '房产'},
{field: 'userName', title: '客户名称'},
{field: 'userPhone', title: '联系电话'},
{field: 'emeUserName', title: '紧急联系人'},
{field: 'emeUserPhone', title: '紧急联系人电话'}
],
responseHandler: function (res) {
ownerList.OWNERLISTcurrentPage = res.currentPage;
if (res.code) {
res = {"totalCount": 0, "recordList": []

};
return res;
}
return res;
}

});

//表格序号
function rowIndex(value, row, index) {
return (ownerList.OWNERLISTcurrentPage-1)*10+index+1;
}

更多api查阅文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

本文固定链接: http://www.webzsky.com/?p=984 | 蓝戒的博客