``` <div class="row"> <form id="search_form" class="col-12" method="post" action=""> <input type="text" name="age" value=""> </form> <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/SoftwareMaterial/detail.html?getList=1&id={:input('id')}", height : '100%', pagination : true, // 是否進行分頁 sidePagination: "server", pageSize : "8", // 每頁顯示的行數 paginationDetailHAlign:'hidden', 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); } } ,{ field: 'name', title: '姓名', aligin:'center', valign:'middle', sortable: true, formatter: function(value, row, index) { return HTMLDecode(value); } } ,{ field: 'phone', title: '電話', aligin:'center', valign:'middle', 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> </div> ```