[TOC] ## **前端** ``` <style type="text/css"> .bootstrap-table{ width: 100%; } .float-hidden,.hidden{ display: none; } </style> <table id="bootstrap-table" class="table table-bordered table-hover col-12 w-100" data-mobile-responsive="true" data-search-on-enter-key="true"></table> <script type="text/javascript"> $(function() { var options = { uniqueId : "id", // 表格主键名称，（默认为id，如表主键不为id必须设置主键） url : "/index.php/admin/User/detail.html?getList=1&id={:input('id')}", width : '100%', sortName : "id", // 排序列名称 不设置这个queryParams.params.sort为null,和下面的 sortOrder : "asc", // 排序方式 asc 或者 desc pagination : true, // 是否进行分页 sidePagination: "server", pageSize : "8", // 每页显示的行数 paginationDetailHAlign:'left',//隐藏分页信息,可选hidden,left,right 必须定义.float-right { float: right!important; } .float-left { float: left!important; } .float-hidden,.hidden { display: none; } paginationParts:['pageInfoShort','pageList'],//默认['pageInfo', 'pageSize', 'pageList'] showFooter:false, //是否开启底部页脚 showSearch: false, showRefresh: false, showToggle: false, showFullscreen: false, showColumns: false, dataField:'data',//{'total':100,rows:[{'id':1},{'id':2},...]}//默认的rows设置为data后数据格式为{'total':100,data:[{'id':1},{'id':2},...]} totalField:'total', columns: [ { field: 'id', title: '编号', aligin:'center', sortable: false, visible:false, formatter: function(value, row, index) { return HTMLDecode(value); }, //页脚计算此列的值 footerFormatter: function(rows){ var sum = ''; for (var i=0;i<rows.length;i++) { sum+=rows[i].id+','; } return sum; } } ,{ field: 'dowload_time', title: '下载时间', rowspan:1,//指定单元格应占用的行数。 colspan:1,//指定单元格应占用的列数。 align:'center',//指定如何对齐列数据。可以使用'left'，'right'，'center'。 halign:'center',//指定如何对齐表头。可以使用'left'，'right'，'center'。 falign:'center',//指示如何对齐表格页脚。可以使用'left'，'right'，'center'。 valign:'middle',//指出如何对齐单元格数据。可以使用'top','middle','bottom' sortable: true, formatter: function(value, row, index) { return HTMLDecode(value); } } ,{ field: 'name', title: '姓名', rowspan:1,//指定单元格应占用的行数。 colspan:1,//指定单元格应占用的列数。 align:'center',//指定如何对齐列数据。可以使用'left'，'right'，'center'。 halign:'center',//指定如何对齐表头。可以使用'left'，'right'，'center'。 falign:'center',//指示如何对齐表格页脚。可以使用'left'，'right'，'center'。 valign:'middle',//指出如何对齐单元格数据。可以使用'top','middle','bottom' sortable: true, formatter: function(value, row, index) { return HTMLDecode(value); } } ,{ field: 'phone', title: '电话', rowspan:1,//指定单元格应占用的行数。 colspan:1,//指定单元格应占用的列数。 align:'center',//指定如何对齐列数据。可以使用'left'，'right'，'center'。 halign:'center',//指定如何对齐表头。可以使用'left'，'right'，'center'。 falign:'center',//指示如何对齐表格页脚。可以使用'left'，'right'，'center'。 valign:'middle',//指出如何对齐单元格数据。可以使用'top','middle','bottom' sortable: true, formatter: function(value, row, index) { return HTMLDecode(value); } } ], // 查询条件 queryParams: function(params) { var curParams = { // 传递参数查询参数 isPagination: this.pagination, pageSize: params.limit, page: params.offset / params.limit + 1, searchValue: params.search, orderByColumn: params.sort,//排序字段 isAsc: params.order//排序方式 }; // 组装额外参数 var json = {}; $.each($("#search_form").serializeArray(), function(i, field) { json[field.name] = field.value; }); return $.extend(curParams, json); }, // 请求获取数据后处理回调函数(在加载远程数据之前，处理响应数据格式) responseHandler: function(res) { //如果上面dataField没有改为data而是默认的rows,则可以在这修改返回的数据 // return { rows: res.data, total: res.total }; //dataField改为data时 return { data: res.data, total: res.total}; //dataField改为data, totalField改为 nums时 // return { data: res.data, nums: res.total}; }, } var table = $("#bootstrap-table"); table.bootstrapTable(options); //HTML反转义 function HTMLDecode(text) { var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; } }) </script> ``` ## **php返回的数据格式** ``` public function audit(){ if (Request::param('getList') == 1) { $request=Request::param(); $data=[ 'total'=>100, "data"=>[ [ "id"=>1, "name"=>"测试数据1" ], [ "id"=>1, "name"=>"测试数据2" ], [ "id"=>1, "name"=>"测试数据3" ], [ "id"=>1, "name"=>"测试数据4" ], [ "id"=>1, "name"=>"测试数据5" ], [ "id"=>1, "name"=>"测试数据6" ], [ "id"=>1, "name"=>"测试数据7" ], [ "id"=>1, "name"=>"测试数据8" ], ] ]; return $data; } return view::fetch('audit'); } ```