問題描述

<table id="table" data-toggle="table" >

<thead>

<tr>

<th>番號</th>

<th>中文標題</th>

<th>出廠期</th>

<th>片長</th>

<th>主題</th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr> <tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

<script type="text/javascript">

$(function () {

$("html").niceScroll();

});

$("#table").bootstrapTable({ // 對應table標簽的id

url: "json.php", // 獲取表格數據的url

method: 'post',

dataType: 'json',

cache: false, // 設置為 false 禁用 AJAX 數據緩存， 默認為true

striped: true, //表格顯示條紋，默認為false

pagination: true, // 在表格底部顯示分頁組件，默認false

paginationLoop: true,

pageList: [10, 50, 100, 500], // 設置頁面可以顯示的數據條數

pageSize: 10, // 頁面數據條數

pageNumber: 1, // 推薦頁碼

search: true,

smartDisplay: false,

showRefresh: true,

sortName: 'pubtime',

sortOrder: 'desc',

sidePagination: 'server', // 設置為服務器端分頁

queryParams: function (params) { // 請求服務器數據時發送的參數，可以在這里添加額外的查詢參數，返回false則終止請求

return {

pageSize: params.limit, // 每頁要顯示的數據條數

sort: params.sort, // 要排序的字段

sortOrder: params.order, // 排序規則

pageNumber: this.pageNumber,

search: this.searchText

}

},

columns: [{

field: 'fanhao',

title: '番號',

align: 'center',

valign: 'middle',

width: '150px',

sortable: true

}, {

field: 'cname',

title: '中文標題',

align: 'center',

valign: 'middle',

sortable: true

}, {

field: 'pubtime',

title: '出廠期',

align: 'center',

valign: 'middle',

width: '100px',

sortable: true

}, {

field: 'time',

title: '片長',

align: 'center',

valign: 'middle',

width: '80px',

sortable: true

}, {

field: 'genre',

title: '主題',

align: 'center',

valign: 'middle',

width: '300px',

}],

onLoadSuccess: function () { //加載成功時執行

console.info("加載成功");

},

onLoadError: function () { //加載失敗時執行

console.info("加載數據失敗");

}

});

$("#table").bootstrapTable("refresh",{

url: "json.php"

});

</script>

問題解答

你的代碼看上去真累, 為什么不格式一下,放在代碼塊中提交呢?

試一下數據全部用Ajax來獲取