1.引入jq.js,bootstrap.js+bootstrap.css,bootstrap-table.js共4个文件
2.html架子
<thead id="table1" data-ajax="requestData" class="table">
<tr>
<th data-checkbox="true"></th>
<th data-filed="name"></th>
<th data-filed="age"></th>
</tr>
</thead>
3.requestData是请求后端的数据,具体如下:
function requestData(params){
//一些ajax请求获取到data
params.success({
total:count,
rows:data
})
}
4.table的初始化
//每次table数据重新加载就需要init一次,如果是对原表单有刷新,应该detroy一次
function initTable(){
$table=$("#table1").bootstrapTable({
striped:true,
pagination:true, //是否分页
sidePagination:'server', //分页由服务器处理还是前端自己处理
pageNumber:1, //初始当前页
pageSize:10, //每页条数
pageList:[10,20,50,100],
})
}
//具体的destroy为
$("#table1").bootstrapTable('destroy');
5.其他对表单的操作:
//1.想要某行可排序 <th data-sortable="true"></th>
//2.想要条纹相间的表格 在table的样式上加上class="table table-striped"
//3.获取已选的数据: var selects=$table.bootstrapTable('getAllSelections');
//4.根据需要显示不同的颜色(写在initTable里面)
rowStyle:function(row,index){
var strclass='';
if(row.age>40) strclass="danger";
else strclass="success";
else return ;
return {classes:strclass};
}