>  기사  >  웹 프론트엔드  >  bootstrapTable에서 데이터를 다시 로드하는 방법은 무엇입니까? 알아보는 3가지 방법!

bootstrapTable에서 데이터를 다시 로드하는 방법은 무엇입니까? 알아보는 3가지 방법!

青灯夜游
青灯夜游앞으로
2021-05-12 11:16:226853검색

이 글에서는 bootstrapTable을 새로 고치는(데이터 다시 로드) 3가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

bootstrapTable에서 데이터를 다시 로드하는 방법은 무엇입니까? 알아보는 3가지 방법!

【관련 추천: "bootstrap tutorial"】

bootstrapTable은 프로젝트에서 데이터를 쿼리하고 조건에 따라 목록을 다시 로드하는 방법에는 여러 가지가 있습니다.

코드를 직접 살펴보세요:

$(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);
}

설명:

방법 1과 방법 2는 테이블이 파괴된 후 새 목록을 생성하는 것입니다. 페이지는 매회 맨 위로 스크롤됩니다. 시간.

방법 3은 1페이지로 이동하는 것입니다. 페이지가 스크롤되지 않으며 경험이 더 좋아질 것입니다. 그러나 쿼리 목록 데이터가 비어 있으면 메서드가 실패합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 bootstrapTable에서 데이터를 다시 로드하는 방법은 무엇입니까? 알아보는 3가지 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제