``` <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> ```