这段时间在做项目的时候用到了bootstrap-table的表格组件,使用的过程中遇到了一个问题,无法从后台获取数据,只能通过 ajax获取数据后再利用bootstrapTable的load方法手动添加。原因是后台返回的数据格式是一个json嵌套,和要求的格式不符,需要先通过 responseHandler 对数据进行处理,分页设置为server 会对其有影响,无法加载数据

function queryParams() {
var ConditionParam = $('.search_box').DABindingGetForm();
var json = {
SearchInfo: {
PageIndex: PageNumber,
PageSize: PageSize,
Sort: null,
ItemsCount: 0,
ConditionParam: ConditionParam
}
}
return { con: JSON.stringify(json) }
}
function tableTest(col) {
$('#test').bootstrapTable({
method: 'post',
contentType: "application/x-www-form-urlencoded",
datatype: 'json',
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "ID asc", //排序方式
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 12, //每页的记录行数(*)
pageList: [20, 50, 100, 150], //可供选择的每页的行数(*)
url: "/CharterInnerProduct/CharterInnerProductBillListData",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber
queryParams: queryParams,//前端调用服务时,会默认传递上边提到的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
//search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true,
search: true,
responseHandler: function (res) {
console.log(res)
return eval(res.Item.ProductList)
},
columns: col,
pagination: true
});
}
