1、首先添加按钮和文本框,如:

<div class="input-group input-group-sm">
										<input type="text" class="form-control" id="table_search_value" placeholder="请输入名称" name="table_search_value" value="">
										<span class="input-group-btn">
												<button class="btn btn-primary" type="button" id="table_tools_search">搜索</button>
											</span>
									</div>

如下图所示:

2、为文本框和搜索添加事件,如:

$('#table_tools_refresh').on('click', function() {
		dataTable.draw(true);
	});
	$('#table_search_value').on( 'keyup', function () {
		dataTable.search( this.value ).draw();
	} );

其中dataTable创建的datatable实例,注意:必须存在"searching": true才能实现搜索,如:

const dataTable = $('#data1').DataTable({
		buttons: [
			{ extend: 'print'},
			{ extend: 'copy'},
			{ extend: 'pdf'},
			{ extend: 'excel'},
			{ extend: 'csv',bom:true},
		],
		columnDefs: [
			{
				orderable: false,//禁用排序
				"targets": [4]
			},
			{type: "number-account",targets: [1]},//对带有万、亿、逗号的数值排序
			{type:"number-percentage",targets: [2,3]},
		],
		"searching": true
	});

3、然后就可以进行搜索了。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐