jQuery 数据表 - 数据表外的搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5990386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables - Search Box outside datatable
提问by Athanasios Emmanouilidis
I'm using DataTables (datatables.net) and I would like my search box to be outside of the table (for example in my header div).
我正在使用 DataTables ( datatables.net) 并且我希望我的搜索框位于表格之外（例如在我的标题 div 中）。
Is this possible ?
这可能吗 ？
回答by netbrain
You can use the DataTables api to filter the table. So all you need is your own input field with a keyup event that triggers the filter function to DataTables. With css or jquery you can hide/remove the existing search input field. Or maybe DataTables has a setting to remove/not-include it.
您可以使用 DataTables api 来过滤表。因此，您所需要的只是您自己的输入字段，并带有一个 keyup 事件，该事件触发 DataTables 的过滤器功能。使用 css 或 jquery，您可以隐藏/删除现有的搜索输入字段。或者 DataTables 有一个设置来删除/不包含它。
Checkout the Datatables API documentation on this.
查看有关此的数据表 API 文档。
Example:
例子：
HTML
HTML
<input type="text" id="myInputTextField">
JS
JS
oTable = $('#myTable').DataTable(); //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
oTable.search($(this).val()).draw() ;
})
回答by zizoujab
As per @lvkz comment :
根据@lvkz 评论：
if you are using datatable with uppercase d .DataTable()( this will return a Datatable API object ) use this :
如果您使用带有大写 d.DataTable()的数据表（这将返回一个数据表 API 对象），请使用：
oTable.search($(this).val()).draw() ;
which is @netbrain answer.
这是@netbrain 的答案。
if you are using datatable with lowercase d .dataTable()( this will return a jquery object ) use this :
如果您使用带有小写 d 的数据表.dataTable()（这将返回一个 jquery 对象），请使用：
oTable.fnFilter($(this).val());
回答by mekwall
You can use the sDomoption for this.
您可以sDom为此使用该选项。
Default with search input in its own div:
默认在其自己的 div 中使用搜索输入：
sDom: '<"search-box"r>lftip'
If you use jQuery UI(bjQueryUIset to true):
如果您使用 jQuery UI（bjQueryUI设置为true）：
sDom: '<"search-box"r><"H"lf>t<"F"ip>'
The above will put the search/filtering inputelement into it's own divwith a class named search-boxthat is outside of the actual table.
上面将把搜索/过滤input元素放到它自己div的一个名为search-box实际表之外的类中。
Even though it uses its special shorthand syntax it can actually take any HTML you throw at it.
即使它使用其特殊的速记语法，它实际上也可以接受您扔给它的任何 HTML。
回答by cinnamonbear
This one helped me for DataTables Version 1.10.4, because its new API
这个帮助我使用了 DataTables 1.10.4 版，因为它的新 API
var oTable = $('#myTable').DataTable();
$('#myInputTextField').keyup(function(){
oTable.search( $(this).val() ).draw();
})
回答by Jonny
More recent versions have a different syntax:
较新的版本具有不同的语法：
var table = $('#example').DataTable();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});
Note that this example uses the variable tableassigned when datatables is first initialised. If you don't have this variable available, simply use:
请注意，此示例使用table第一次初始化数据表时分配的变量。如果您没有此变量可用，只需使用：
var table = $('#example').dataTable().api();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});
Since: DataTables 1.10
从：数据表 1.10
回答by Sky Yip
This should be work for you:(DataTables 1.10.7)
这应该适合你:(DataTables 1.10.7)
oTable = $('#myTable').dataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.api().search($(this).val()).draw();
})
or
或者
oTable = $('#myTable').DataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.search($(this).val()).draw();
})
回答by citxx
I want to add one more thing to the @netbrain's answerrelevant in case you use server-side processing (see serverSideoption).
如果您使用服务器端处理（请参阅serverSide选项），我想在@netbrain 的相关答案中再添加一件事。
Query throttling performed by default by datatables (see searchDelayoption) does not apply to the .search()API call. You can get it back by using $.fn.dataTable.util.throttle()in the following way:
默认情况下由数据表执行的查询限制（请参阅searchDelay选项）不适用于.search()API 调用。您可以通过以下方式使用$.fn.dataTable.util.throttle()取回它：
var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
function(val) {
table.search(val).draw();
},
400 // Search delay in ms
);
$('#mySearchBox').keyup(function() {
search(this.value);
});
回答by Bruno Ribeiro
I had the same problem.
我有同样的问题。
I tried all alternatives posted, but no work, I used a way that is not right but it worked perfectly.
我尝试了所有发布的替代方案，但没有成功，我使用了一种不正确但效果很好的方法。
Example search input
示例搜索输入
<input id="serachInput" type="text">
the jquery code
jquery代码
$('#listingData').dataTable({
responsive: true,
"bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input
$("#serachInput").on("input", function (e) {
e.preventDefault();
$('#listingData').DataTable().search($(this).val()).draw();
});
回答by Senanayaka
$('#example').DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../admin/ajax/loadtransajax.php",
"fnServerParams": function (aoData) {
// Initialize your variables here
// I have assign the textbox value for "text_min_val"
var min_val = $("#min").val(); //push to the aoData
aoData.push({name: "text_min_val", value:min_val});
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('id', 'tr_' + aData[0]);
$(nRow).attr('name', 'tr_' + aData[0]);
$(nRow).attr('min', 'tr_' + aData[0]);
$(nRow).attr('max', 'tr_' + aData[0]);
}
});
In loadtransajax.phpyou may receive the get value:
在loadtransajax.php您可能会收到 get 值：
if ($_GET['text_min_val']){
$sWhere = "WHERE (";
$sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
$sWhere .= ')';
}
回答by ebrown
You could move the div when the table is drawn using the fnDrawCallbackfunction.
您可以在使用该fnDrawCallback函数绘制表格时移动 div 。
$("#myTable").dataTable({
"fnDrawCallback": function (oSettings) {
$(".dataTables_filter").each(function () {
$(this).appendTo($(this).parent().siblings(".panel-body"));
});
}
});
