我使用了datatables jquery插件来显示一个列表，该列表是使用对服务器的ajax调用加载的。我使用该bFilter属性是为了隐藏过滤器，因为我想将搜索输入放在侧边栏中。
$(function () {
var generatedCustomerTable = $('#ItemsTable').DataTable({
"order": [[0, "desc"]],
"bSort": true,
processing: true,
serverSide: true,
ajax: {
url: "/api/Ajax/Test",
method: "POST",
},
columns: [
{ visible: false, data: "id" },
{ orderable: false, data: "name" },
{ orderable: false, data: "value" },
],
bLengthChange: false, // Hide the page size
bFilter: false, // Hide the search box
ordering: true,
paging: true,
pagingType: "full_numbers",
pageLength: 10,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
});
$("#btnTest").click(function () {
// I WANT HERE TO SET THE FILTER
generatedCustomerTable.draw();
});
});
我想以编程方式设置过滤器文本，但是我还没有找到一种方法。
是否有某种函数可以让我设置过滤器值，以便能够调用该.draw()方法以刷新列表的内容。
在您的代码中，通过将设置为bFilter，false不仅会隐藏搜索框，还会禁用dataTable中的搜索功能，
为了创建自己的自定义搜索框，您必须启用bFilter，然后通过设置隐藏css（推荐）的默认搜索控件：
.dataTables_filter {
display:none;
}
请参见下面的代码段：
var dataSet = [
[ 1, "Name 1","one" ],
[ 2, "BRimos", "JS" ],
[ 3, "pitaridis","Data" ],
[ 4, "Stack", "overflow" ],
[ 5, "Name 2","two" ],
[ 6, "Name 3","three" ],
[ 7, "Name 4","one" ],
[ 8, "BRimos 2", "JS" ],
[ 9, "pitaridis 2","Data" ],
[ 10, "Stack 2", "overflow" ],
[ 11, "Name 5","two" ],
[ 12, "Name 6","three" ]
];
$(function () {
var generatedCustomerTable =$('#ItemsTable').DataTable( {
"order": [[0, "desc"]],
"bSort": true,
data: dataSet,
columns: [
{ visible: false,title: "id" },
{ orderable: false,title: "name" },
{ orderable: false,title: "value" }
],
bLengthChange: false, // Hide the page size
bFilter: true, // Hide the search box
ordering: true,
paging: true,
pagingType: "full_numbers",
pageLength: 5,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
} );
$("#btnTest").click(function () {
console.log($("#filter").val(),generatedCustomerTable);
generatedCustomerTable
.search($("#filter").val()).draw();
});
});.dataTables_filter {
display:none;
}<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<input id="filter" type="text" />
<button id="btnTest">search</button>
<table id="ItemsTable" width="100%"></table>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句