bootstrap table服務器端分頁后點擊頁碼整個表格都刷新了,怎么才能只刷新數據,表格不刷新
問題描述
<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>
問題解答
回答1:你的代碼看上去真累, 為什么不格式一下,放在代碼塊中提交呢?
試一下數據全部用Ajax來獲取
