cari
Rumahhujung hadapan webTutorial BootstrapbootstrapTable如何重新加载数据?3种方式了解一下!

本篇文章给大家介绍一下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 是将 table销毁销毁,再生成新的列表;由于 table销毁,使得每次页面会滚动最上面。

方法3 是跳转到第1页 ,页面不会滚动,体验会更好但是当查询列表数据为空时,方法失效。

更多编程相关知识,请访问:编程教学!!

Atas ialah kandungan terperinci bootstrapTable如何重新加载数据?3种方式了解一下!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:csdn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Bootstrap dan React: Menggabungkan rangka kerja untuk pembangunan webBootstrap dan React: Menggabungkan rangka kerja untuk pembangunan webApr 28, 2025 am 12:08 AM

Alasan untuk menggabungkan Bootstrap dan React adalah pelengkap mereka: 1. Bootstrap menyediakan gaya dan komponen yang telah ditetapkan untuk mempermudah reka bentuk UI; 2. React meningkatkan kecekapan dan prestasi melalui pembangunan komponen dan DOM maya. Gunakannya bersempena untuk menikmati pembinaan UI yang cepat dan pengurusan interaksi yang kompleks.

Dari Zero hingga Bootstrap: Bermula dengan cepatDari Zero hingga Bootstrap: Bermula dengan cepatApr 27, 2025 am 12:07 AM

Bootstrap adalah rangka kerja front-end sumber terbuka berdasarkan HTML, CSS dan JavaScript, yang direka untuk membantu pemaju dengan cepat membina laman web responsif. Falsafah reka bentuknya adalah "mudah alih pertama", menyediakan banyak komponen dan alat yang telah ditetapkan, seperti sistem grid, butang, bentuk, bar navigasi, dan lain-lain, memudahkan proses pembangunan depan, meningkatkan kecekapan pembangunan, dan memastikan respons dan konsistensi laman web. Menggunakan bootstrap boleh bermula dengan halaman mudah dan secara beransur -ansur menambah komponen lanjutan seperti kad dan kotak modal. Amalan terbaik untuk mengoptimumkan prestasi termasuk menyesuaikan bootstrap, menggunakan CDN, dan mengelakkan terlalu banyak nama kelas.

React dan Bootstrap: Meningkatkan Reka Bentuk Antara Muka PenggunaReact dan Bootstrap: Meningkatkan Reka Bentuk Antara Muka PenggunaApr 26, 2025 am 12:18 AM

React dan Bootstrap boleh diintegrasikan dengan lancar untuk meningkatkan reka bentuk antara muka pengguna. 1) Pasang Pakej Ketergantungan: NPMinstallBootstrapReact-Bootstrap. 2) Import fail CSS: import'bootstrap/dist/css/bootstrap.min.css '. 3) Gunakan komponen bootstrap seperti butang dan bar navigasi. Dengan gabungan ini, pemaju boleh memanfaatkan fleksibiliti React dan perpustakaan gaya Bootstrap untuk mewujudkan antara muka pengguna yang indah dan cekap.

Mengintegrasikan Bootstrap ke React: Panduan PraktikalMengintegrasikan Bootstrap ke React: Panduan PraktikalApr 25, 2025 am 12:04 AM

Langkah-langkah untuk mengintegrasikan bootstrap ke dalam projek React termasuk: 1. Pasang pakej bootstrap, 2 mengimport fail CSS, 3. Gunakan nama kelas bootstrap untuk elemen gaya, 4. Integrasi ini menggunakan komponen reaksi dan sistem gaya Bootstrap untuk mencapai pembangunan UI yang cekap.

Untuk apa bootstrap digunakan? Penjelasan praktikalUntuk apa bootstrap digunakan? Penjelasan praktikalApr 24, 2025 am 12:16 AM

BootstrapisapowerfulframeworkthatsImplifiescreatingResponsive, mobile-firstwebsites.itoffers: 1) AgridsystemforadaptableLelayouts, 2) pra-styledelementsLikonsandforms, and3) Javascriptcomponentssuctivity.

Bootstrap: Dari susun atur ke komponenBootstrap: Dari susun atur ke komponenApr 23, 2025 am 12:06 AM

Bootstrap adalah kerangka depan yang dibangunkan oleh Twitter yang mengintegrasikan HTML, CSS dan JavaScript untuk membantu pemaju dengan cepat membina laman web responsif. Fungsi terasnya termasuk: Sistem Grid dan Susun atur: Berdasarkan reka bentuk 12-kolumn, menggunakan susun atur Flexbox, dan menyokong halaman responsif saiz peranti yang berbeza. Komponen dan Gaya: Menyediakan perpustakaan komponen yang kaya, seperti butang, kotak modal, dan lain -lain, dan anda boleh mencapai kesan yang indah dengan menambah nama kelas. Bagaimana Ia Berfungsi: Bergantung pada CSS dan JavaScript, CSS menggunakan preprocessors kurang atau SASS, dan JavaScript bergantung pada jQuery untuk mencapai kesan interaktif dan dinamik. Melalui ciri -ciri ini, bootstrap sangat meningkatkan pembangunan

Apa itu Bootstrap? Pengenalan untuk pemulaApa itu Bootstrap? Pengenalan untuk pemulaApr 22, 2025 am 12:07 AM

Bootstrapisafreecssframeworksheatsimbebdevelopmentbyprovidingpre-styledcomponentsandjavascriptplugins.it'SidealforcreatingResponsive, mobile-firstwebsites, menawarkanflexiblexibridsystomforlayouthorlayoToShoShorlayoToShoShorlayoToShorlayoToShoShorlayoToShoShorlayoToShoShoShorlayoutSandoToShoShoShorLayOrToShoShoShorlayOrToShoShoShoShorlayoToShoShoShorLayoToShorLayOrToShorLayOrToShorLayOrToShorLayOrToShorLayOrTORA

Bootstrap Demystified: Penjelasan RingkasBootstrap Demystified: Penjelasan RingkasApr 21, 2025 am 12:13 AM

Bootstrapisafree, open-sourcecssframeworkthathelpscreateressive, mudah alih-firstwebsites.1) itoffersagridsystemforlayoutflexability, 2) termasukpre-styledcomponentsforquickdesign, dan3) ishighlycustomiDgenericlooksshipsships,

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft