After bootstrap table server-side paging, click the page number and the entire table is refreshed. How can I refresh only the data but not the table?

Question

<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({ // The id corresponding to the table tag

url: "json.php", // Get the table Data url

method: 'post',

dataType: 'json',

cache: false, // Set to false to disable AJAX data caching, the default is true

striped: true, //The table displays stripes, the default is false

pagination: true, //The pagination component is displayed at the bottom of the table, the default is false

paginationLoop: true,

pageList: [10, 50, 100, 500], //Set the number of data items that can be displayed on the page

pageSize: 10, //The number of page data items

pageNumber: 1, // Recommended page number

search: true,

smartDisplay: false,

showRefresh: true,

sortName: 'pubtime',

sortOrder: 'desc',

sidePagination: 'server', // Set to server-side paging

queryParams: function (params) { // When requesting server data For the parameters sent, you can add additional query parameters here. If false is returned, the request will be terminated.

return {

pageSize: params.limit, //The number of data items to be displayed on each page

sort: params.sort, // Field to be sorted

sortOrder: params.order, // Sorting rule

pageNumber: this.pageNumber,

search: this.searchText

}

},

columns: [{

field: 'fanhao',

title: 'number',

align: 'center',

valign: 'middle',

width: '150px',

sortable: true

}, {

field: 'cname',

title: 'Chinese title',

align: 'center',

valign: 'middle',

sortable: true

}, {

field: 'pubtime',

title: 'Factory date',

align: 'center',

valign: 'middle',

width: '100px',

sortable: true

}, {

field: 'time',

title: 'length',

align: 'center',

valign: ' middle',

width: '80px',

sortable: true

}, {

field: 'genre',

title: 'Theme',

align: 'center',

valign: 'middle',

width: '300px',

} ],

onLoadSuccess: function () { //Executed when loading is successful

console.info("Loading successful");

},

onLoadError: function () { //Executed when loading fails

console.info("Loading data failed");

}

});

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

url: "json.php"

});

</ script>

Answer 1

Your code looks really tired. Why not format it and submit it in a code block?

Try to use Ajax to get all the data