問題描述

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

<thead>

<tr>

<th>番號</th>

<th>中文標(biāo)題</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({ // 對應(yīng)table標(biāo)簽的id

url: "json.php", // 獲取表格數(shù)據(jù)的url

method: 'post',

dataType: 'json',

cache: false, // 設(shè)置為 false 禁用 AJAX 數(shù)據(jù)緩存， 默認(rèn)為true

striped: true, //表格顯示條紋，默認(rèn)為false

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

paginationLoop: true,

pageList: [10, 50, 100, 500], // 設(shè)置頁面可以顯示的數(shù)據(jù)條數(shù)

pageSize: 10, // 頁面數(shù)據(jù)條數(shù)

pageNumber: 1, // 推薦頁碼

search: true,

smartDisplay: false,

showRefresh: true,

sortName: 'pubtime',

sortOrder: 'desc',

sidePagination: 'server', // 設(shè)置為服務(wù)器端分頁

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

return {

pageSize: params.limit, // 每頁要顯示的數(shù)據(jù)條數(shù)

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

sortOrder: params.order, // 排序規(guī)則

pageNumber: this.pageNumber,

search: this.searchText

}

},

columns: [{

field: 'fanhao',

title: '番號',

align: 'center',

valign: 'middle',

width: '150px',

sortable: true

}, {

field: 'cname',

title: '中文標(biāo)題',

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 () { //加載成功時(shí)執(zhí)行

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

},

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

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

}

});

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

url: "json.php"

});

</script>

問題解答

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

試一下數(shù)據(jù)全部用Ajax來獲取