这段时间在做项目的时候用到了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 }); }