[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'); } ```