jquery datatables添加搜索功能

本文主要是介绍jquery datatables添加搜索功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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、然后就可以进行搜索了。

这篇关于jquery datatables添加搜索功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---