Home > Web Front-end > Bootstrap Tutorial > How to reload data in bootstrapTable? 3 ways to find out!

How to reload data in bootstrapTable? 3 ways to find out!

青灯夜游
Release: 2021-07-29 18:52:48
forward
6974 people have browsed it

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.

How to reload data in bootstrapTable? 3 ways to find out!

[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);
}
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template