Bootstrap中文网：www.bootcss.com
Bootstrap Table源码：github.com/wenzhixin/bootstrap-table
bootstrap-table是依赖于bootstarp的，所以应先引入bootstarp相关文件
<!-- 引入 Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
在前置js文件引入后再引入bootstrap-table.js。
github上的文件解压后会得到多个文件夹及文件，将dist文件夹重命名为bootstrap-table，里面的所有文件及文件夹保留原样，确保bootstrap-table文件夹里有bootstrap-table.js、bootstrap-table.css及locale文件夹。
<script src="./public/js/bootstrap-table/bootstrap-table.js"></script>
<link href="./public/js/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="./public/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<div>
<!--工具栏-->
<div id="toolbar"></div>
<!--表格-->
<table id="tabledemo">
</table>
</div>
外部的table父级的div和
<div id="toolbar"></div>
非必需。
<script>
//初始化对象定义
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tabledemo').bootstrapTable({
url: './test.php', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
// cache: false, //是否使用缓存，默认为true，
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
// queryParams: oTableInit.queryParams,//传递参数
queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
// pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
pageList:[],
search: true, //是否显示表格搜索，此搜索是客户端搜索.
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "no", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '名字'
},
{
field: 'operate',
title: '操作',
//自定义方法，添加操作按钮
formatter:function(value, row, index) {//赋予的参数
return [
'<a class="btn active edit" href="#">编辑</a>',
'<a class="btn active del" href="#">删除</a>',
].join('');
}
},
],
//行样式设置可省略按默认.
rowStyle: function (row, index) {
var classesArr = ['success', 'info'];
var strclass = "";
if (index % 2 === 0) {//偶数行
strclass = classesArr[0];
} else {//奇数行
strclass = classesArr[1];
}
return { classes: strclass };
},
responseHandler:function (res) {
//console.log(res);
/***服务端分页**/
return {
total : res.count, //总页数,前面的key必须为"total"
rows : res.list //行数据，前面的key要与之前设置的dataField的值一致.
};
/***客户端分页
return {
data : res.list, //全部信息
};
*/
}
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
console.log(params);
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
//或者直接修改params['xx']="xx";然后return params即可
limit: params.limit, //页面大小
offset:params.offset,
search:''
};
return temp;
};
return oTableInit;
};
//定义一个对象
var tableobj = TableInit();
//初始化，这里才开始渲染
tableobj.Init();
</script>
示例代码为php
echo json_encode(array(
'count'=>20,
'list'=>array(
array('id'=>1,'name'=>'tt'),
array('id'=>2,'name'=>'bb'),
array('id'=>3,'name'=>'cc'),
)
));
js初始化参数设置为
sidePagination: "client",
对服务端返回的信息进行格式化.服务端需返回全部信息，由前端页面负责控制分页显示。若服务端返回的json对象里已经包含data则无需设置responseHandler此项。
responseHandler:function (res) {
return {
data : res.list, //全部信息
};
}
js初始化参数设置为
sidePagination: "server",
对服务端返回的信息进行格式化。若服务端返回的json对象里已经包含total、rows则无需设置responseHandler此项，total为全部的数目不是当前返回结果的条数。
responseHandler:function (res) {
return {
total : res.count, //结果总个数,前面的key必须为"total"
rows : res.list //行数据，前面的key要与之前设置的dataField的值一致.
};
}
当点击页码的时候默认将在url中带offset和limit参数（所带参数可按照上面代码设置函数进行修改),后端更具这两个参数进行分页查询。注意是从0开始算的，例如每页5条记录，第一页offset：0 limit：5,第二页offset:5,limit:5。
$("#tabledemo").bootstrapTable('refresh', {silent: true});
//或者
$("#tabledemo").bootstrapTable('refresh', {url : path});
//或者，refreshOptions：更新bootstrapTable options，并从server端获取数据。与refresh的区别在于，refreshOptions设置的option，会被作为下次请求server数据的默认option使用。
$("#tabledemo").bootstrapTable('refreshOptions',{pageNumber : 1});
toolbar: '#toolbar', //工具按钮用哪个容器
设置次参数，初始化后会将#toolbar整合到表格区块中。
表格及工具栏的按钮事件可以用jq进行事件绑定实现所需要的功能。
加载更多