可数据表-可数据表之外的搜索框

小开

最佳答案

可以使用 DataTables api 筛选表。因此，您所需要的只是您自己的输入字段，其中包含一个 keyup 事件，该事件触发 DataTables 的 filter 函数。使用 css 或 jquery，您可以隐藏/删除现有的搜索输入字段。或者 DataTables 有一个删除/不包含它的设置。

查看关于此的 Datatables API 文档。

例如:

超文本标示语言

<input type="text" id="myInputTextField">

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() ;
})

小开

您可以为此使用 sDom选项。

默认情况下，搜索输入在自己的 div 中:

sDom: '<"search-box"r>lftip'

如果使用 jQuery UI (bjQueryUI设置为 true) :

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

上面的代码将把搜索/过滤 input元素放到它自己的 div中，使用一个名为 search-box的类，该类位于实际表之外。

尽管它使用特殊的速记语法，但实际上它可以接受任何你扔给它的 HTML。

小开

当使用 fnDrawCallback函数绘制表时，可以移动 div。

    $("#myTable").dataTable({
"fnDrawCallback": function (oSettings) {
$(".dataTables_filter").each(function () {
$(this).appendTo($(this).parent().siblings(".panel-body"));
});
}
});

小开

这个对 DataTables Version 1.10.4有帮助，因为它的新 API

var oTable = $('#myTable').DataTable();
$('#myInputTextField').keyup(function(){
oTable.search( $(this).val() ).draw();
})

小开

根据@lvkz 评论:

如果您使用大写字母 d.DataTable()的 dattable (这将返回一个 DatableAPI 对象) ，请使用以下命令:

 oTable.search($(this).val()).draw() ;

就是@netbrain 的答案。

如果使用小写的 d.dataTable()形式的 dattable (这将返回一个 jquery 对象) ，请使用以下命令:

 oTable.fnFilter($(this).val());

小开

$('#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]);
}
});

在 loadtransajax.php中，您可能会收到 get 值:

if ($_GET['text_min_val']){
$sWhere = "WHERE (";
$sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
$sWhere .= ')';
}

小开

如果您使用的是 JQuerydataTable，那么您只需要添加 "bFilter":true。这将显示默认的搜索框外表及其工作动态。.和预期的一样

$("#archivedAssignments").dataTable({
"sPaginationType": "full_numbers",
"bFilter":true,
"sPageFirst": false,
"sPageLast": false,
"oLanguage": {
"oPaginate": {
"sPrevious": "<< previous",
"sNext" : "Next >>",
"sFirst": "<<",
"sLast": ">>"
}
},
"bJQueryUI": false,
"bLengthChange": false,
"bInfo":false,
"bSortable":true
});

小开

这应该适合您: (DataTables 1.10.7)

oTable = $('#myTable').dataTable();


$('#myInputTextField').on('keyup change', function(){
oTable.api().search($(this).val()).draw();
})

或者

oTable = $('#myTable').DataTable();


$('#myInputTextField').on('keyup change', function(){
oTable.search($(this).val()).draw();
})

小开

最近的版本有不同的语法:

var table = $('#example').DataTable();


// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});

请注意，这个例子使用了首次初始化数据表时分配的变量 table。如果您没有这个可用的变量，只需使用:

var table = $('#example').dataTable().api();


// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});

从: DataTables 1.10开始

资料来源: https://datatables.net/reference/api/search()

小开

我也有同样的问题。

我尝试了所有的替代品张贴，但没有工作，我使用的方法是不正确的，但它完美的工作。

搜索输入示例

<input id="searchInput" type="text">

Jquery 代码

$('#listingData').dataTable({
responsive: true,
"bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input


$("#searchInput").on("input", function (e) {
e.preventDefault();
$('#listingData').DataTable().search($(this).val()).draw();
});

小开

如果您使用服务器端处理，我想向 @ netbrain 的回答添加一个相关的内容(参见服务器端选项)。

数据表默认执行的查询节流(参见 Search 延迟选项)不适用于 .search() API 调用。你可以通过以下方式使用 $. fn.dataTable.util.油门()来获得它:

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);
});

小开

对于 DataTable 的最新版本和新版本，您应该遵循以下步骤:

1-searching选项必须是 true。

隐藏默认搜索输入:

.dataTables_filter {
display: none;
}

3-添加新的搜索输入:

<input type="text" id="search">

4-请求搜索:

$('#search').keyup(function() {
var table = $('.table-meetups').DataTable();
table.search($(this).val()).draw();
});