Home > Article > Web Front-end > How to reload data in bootstrapTable? 3 ways to find out!
This article will introduce you to 3 ways to refresh (reload data) bootstrapTable. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
[Related recommendation: "bootstrap tutorial"]
bootstrapTable is used in the project to query data according to conditions and reload the list , there are several ways.
Look at the code directly:
$(function() { load(); }); function load() { $('#dataTable').bootstrapTable( { method : 'post', url : "/user/list", pageSize : 10, pageNumber : 1, sidePagination : "server", queryParams : function(params) { return { limit: params.limit, offset: params.offset, userName: $.trim( $('#userName').val() ) , age: $.trim( $('#age').val() ) , } }, columns : [ { checkbox : true }, { field : 'userName', title : '名称' , }, { field : 'age', title : '年龄' , }, { field : 'createDate', title : '创建时间' , }, { title : '操作', field : 'id', formatter : function(value, row, index) { return '' ; } } ] }); } // 方法1: 刷新(重新加载数据) function reLoad() { $('#dataTable').bootstrapTable('destroy'); load(); } // 方法2: 刷新(重新加载数据) function reLoad2() { $("#dataTable").bootstrapTable('refreshOptions',{pageNumber:1}); // pageNumber:1, 指定页码为第1页 $("#dataTable").bootstrapTable('refresh'); } // 方法3(推荐): 跳转到第1页(包含查询和重新加载) function reLoad3() { $("#dataTable").bootstrapTable('selectPage', 1); }
Explanation:
Method 1 and Method 2 are to destroy the table and then generate a new list; due to table Destroyed so that the page will scroll to the top every time.
Method 3 is to jump to page 1. The page will not scroll and the experience will be better. But when the query list data is empty, the method fails.
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of How to reload data in bootstrapTable? 3 ways to find out!. For more information, please follow other related articles on the PHP Chinese website!