目录
例1
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-table.js" ></script>
</head>
<body>
<table id="data-table"></table>
</body>
<script type="text/javascript">
var $table = $('#data-table');
$table.bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: '序号'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '价格'
}, ]
});
</script>
</html>data1.json
[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 1",
"price": "$1"
},
{
"id": 5,
"name": "Item 1",
"price": "$1"
},
{
"id": 6,
"name": "Item 1",
"price": "$1"
},
{
"id": 7,
"name": "Item 1",
"price": "$1"
}
]例2
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-table.js" ></script>
</head>
<body>
<div id="toolbar">
<button class="btn btn-primary" id="btnRefresh">刷新</button>
</div>
<table id="data-table"></table>
</body>
<script type="text/javascript">
var $table = $('#data-table');
//查询参数
var queryParams = {id: 1};
/**
* 初始化Table
*/
// $table.bootstrapTable('destroy'); //先销毁表格
//初始化表格
$table.bootstrapTable({
//表格参数
url: 'data1.json', //请求地址,此处数据为本地加载
method: "get", //请求方式
contentType: "application/x-www-form-urlencoded", //请求内容类型
dataType: "json", //数据类型
// height: '582', //table高度：如果没有设置，表格自动根据记录条数觉得表格高度
striped: true, //是否显示行间隔色
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
cache: false, //是否使用缓存
uniqueId: "id", //每行的唯一标识
toolbar: "#toolbar", //指定工具栏
showRefresh: false, //显示刷新按钮
showToggle: false, //切换显示样式
cardView: false, //默认显示详细视图
search: true, //是否显示搜索
pagination: true, //是否显示分页
clickToSelect: true, //是否启用点击选中行
minimumCountColumns: 2, //最少要显示的列数
showColumns: false, //显示隐藏列
undefinedText: '-', //cell没有值时显示
//分页方式：client客户端分页，server服务端分页
/* 指定。注意，这两种后台传过来的json数据格式也不一样
client : 正常的json array格式 [{},{},{}]
server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。*/
sidePagination: "client",
pageSize: 5, //每页的记录行数
pageNumber: 1, //初始化加载第1页，默认第1页
pageList: "[5,10, 20, 50, 80, 100]", //可供选择的每页的行数
paginationFirstText: "首页",
paginationPreText: "上一页",
paginationNextText: "下一页",
paginationLastText: "末页",
buttonsClass: 'btn', //按钮样式
iconSize: 'pager', //分页器class
queryParams: queryParams, //查询条件
//列参数
//表头
columns: [
{
title: '选择',
checkbox: true,
align: 'center' // 居中显示
}, {
field: 'id',
title: '序号',
align: 'center' // 居中显示
}, {
field: 'name',
title: '商品名称',
align: 'center' // 居中显示
}, {
field: 'price',
title: '价格',
align: 'center' // 居中显示
} ],
onLoadSuccess: function (res) {//可不写
//加载成功时
console.log(res);
},
onLoadError: function (statusCode) {
return "加载失败了"
},
formatLoadingMessage: function () {
//正在加载
return "拼命加载中...";
},
formatNoMatches: function () {
//没有匹配的结果
return '无符合条件的记录';
}
});
// 获取表格所有已经勾选的行数据，为一个对象数组
var selects = $table.bootstrapTable('getSelections');
//刷新
$("#btnRefresh").on('click', function(){
$table.bootstrapTable('refresh');
});
</script>
</html>
data1.json数据同例1。