ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >bootstrapTable にデータをリロードするにはどうすればよいですか?調べる3つの方法!

bootstrapTable にデータをリロードするにはどうすればよいですか?調べる3つの方法!

青灯夜游
青灯夜游転載
2021-05-12 11:16:227023ブラウズ

この記事では、bootstrapTable を更新 (データの再読み込み) する 3 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

bootstrapTable にデータをリロードするにはどうすればよいですか?調べる3つの方法!

[関連する推奨事項: "bootstrap チュートリアル"]

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。