console
$(function() {
$('#table').bootstrapTable({
url: 'https://www.easy-mock.com/mock/5ce6627514d12512bdbf8891/user', //数据地址
totalField:'total', //总条数字段
dataField:'data', //数据存放字段
height:'300', //表格高度
pagination:true, //是否显示分页
sidePagination:'server', //使用服务端分页
clickToSelect: true, //开启checkbox
cache: false, //不使用缓存
//以下为数据字段
columns: [{
field: 'state',
checkbox: 'true'
},
{
field: 'id',
title: 'ID',
sortable: true
}, {
field: 'createDate',
title: '注册日期',
sortable: true
}, {
field: 'name',
title: '姓名',
sortable: true
},{
field: 'mobile',
title: '手机号'
}, {
field: 'status',
title: '用户状态'
}],
// 以下为ajax返回结果处理器
responseHandler: function (res) {
//todo 生产环境中请删除该处调试代码
console.log(res.result);
return res.result;
}
});
// 选中全部
$('#checkAll').click(function(){
$('#table').bootstrapTable('checkAll')
});
// 取消全选
$('#uncheckAll').click(function(){
$('#table').bootstrapTable('uncheckAll')
});
// 获取选中对象集合
$('#getSelections').click(function(){
alert('选中对象集合: ' + JSON.stringify($('#table').bootstrapTable('getSelections')))
});
})
<hr/>
<a href="#" class="btn btn-default" role="button" id="checkAll">选中全部</a>
<a href="#" class="btn btn-default" role="button" id="uncheckAll">取消全选</a>
<a href="#" class="btn btn-default" role="button" id="getSelections">获取选中</a>
<hr/>
<table id="table"></table>