首先引入文件不必提，引入bootstrap和bootstrap-table
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>
有三种设置table的方式，以下：
1、对于静态的可以直接设置table
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
2、设置远程的链接渲染table
<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name" data-width="60">Item Name</th>
<th data-field="price" data-formatter="functionName">Item Price</th>
</tr>
</thead>
</table>
这里的field是根据远程连接返回的不同key值来设置的，
data-width:设置这一列的宽度
data-formatter 设置的是这一列渲染的展示方法，如下：
function vestSatusFormatter(val,row,index){
if(val)
return '<span title="'+val+'" >'+val+'</span>'
else
return '无数据'
}
val对应这个field返回的值，row是这一行的所有数据，index对应的第几条数据（从0开始），return 返回的即前台用户看到的呈现结果；
3、通过table的id设置
<table id="table" data-url="data1.json"></table>
$('#table').bootstrapTable('destroy').bootstrapTable({
url: 'data1.json', // 改变当前table的链接 ，请求后台的URL（*）可以不需要
method: 'post', //请求方式（*）
toolbar: toolbar, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: queryParams, //传递参数（*），这里应该返回一个object，即形如{param1:val1,param2:val2}
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 20, //每页的记录行数（*）
pageList: [20, 50, 100], //可供选择的每页的行数（*）
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
根据搜索条件刷新table
$("#"+domId).bootstrapTable('destroy').bootstrapTable({
striped:true,
sidePagination: 'server',
pagination:true,
pageSize: 10,
pageList: [10, 20, 50, 100, 200,400],
queryParams: function(param){
var query;
if(type && search){
params['searchType'] = “你的搜索值”;
params['searchContent'] = "你的搜索值";
};
query=params;
$.extend(query,param);
return query;
},
formatLoadingMessage: function(){
return '正在加载...';
},
formatNoMatches: function(){
return '没有找到数据~';
},
formatShowingRows: function(pageFrom, pageTo, totalRows){
return '共'+totalRows+'条，显示'+pageFrom+'到'+pageTo+'条记录';
},
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
}
});
另外的是涉及到后台返回的参数跟原框架的不同，修改
修改方法
responseHandler:function (res) {
return {
rows:res.list //返回的数据详情
total:res.total_count, //总条数
};
},
涉及到保存分页的问题可能会修改bootstrap-table.js源码,主要用到一个方法$(table).bootstrapTable('getOptions')
在js里定义原型方法
BootstrapTable.prototype.getPage = function (params) {
return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};
}; //这个只是提供更简洁的一种方法，不一定需要，看个人情况
并且定义该方法 大概在3015行左右
var allowedMethods = [
'getOptions','getPage',
'getSelections', 'getAllSelections', 'getData'
...
]
下面可以利用该方法
function setOptions(table,sessionName) {
//获取到当前页码的相关信息
var options = $(table).bootstrapTable('getOptions'),
Obj = {
"limit":options.pageSize,
"offset":(options.pageNumber - 1)*options.pageSize,
"sort":options.sortName,
"order":options.sortOrder
};
}
最后的是一点展示方面的问题，毕竟是一枚前端仔，你懂得，
有些table比较高可以设置height控制头部固定，但是会影响拖拽的效果所以要加这一句
<table id="table" class="data-table" data-height="600" ></table>
$(window).resize(function () {
$('#table').bootstrapTable('resetView');
});
当然，如果你的th需要换行，需要这些设置
#table{
table-layout: fixed;
}
#tabletd{
word-break:break-all;
word-wrap:break-word;
}
.fixed-table-container thead th .th-inner{
white-space: pre-line !important;
}
暂时想到的只有这些，如果有什么不对的地方欢迎指出，蟹蟹~
网友评论