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

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