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来获取
网公网安备