bootstap-table 插件，实现自定义搜索

最新推荐文章于 2025-09-14 01:11:10 发布

原创最新推荐文章于 2025-09-14 01:11:10 发布 · 8.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #table #自定义搜索 #分页 #从零位置开始

前段js 同时被 3 个专栏收录

1 篇文章

订阅专栏

bootstrap-table

1 篇文章

订阅专栏

遍历

1 篇文章

订阅专栏

本文介绍如何在基于Bootstrap Table的网页应用中实现表格数据的动态搜索功能。通过JavaScript和jQuery，文章详细解释了如何设置搜索按钮点击事件，以及如何从表单中收集输入并将其转换为查询参数来刷新表格数据。

//search按钮绑定查询事件
	$('#dosearch').click(function() {

		var params = $('#table-pagination').bootstrapTable('getOptions')
		params.queryParams = function(params) {

			//定义参数
			var search = {};
			//遍历form 组装json
			$.each($("#searchform").serializeArray(), function(i, field) {
				console.info(field.name + ":" + field.value + " ");
				//可以添加提交验证
				
				search[field.name] = field.value;
			});

			//参数转为json字符串，并赋给search变量 ,JSON.stringify <ie7不支持，有第三方解决插件
			params.search = JSON.stringify(search)
			console.info(params);
			return params;
		}

		$('#table-pagination').bootstrapTable('refresh', params)
		console.info(params);
	});