数据表 - 搜索框之外的数据表数据表 - 搜索框之外的数据表(Datatables - Search

我使用的数据表（ datatables.net ），我想我的搜索框是（在我的头DIV例如）在表格之外。

这可能吗 ？

Answer 1:

您可以使用数据表的API来过滤表。 因此，所有你需要的是与触发过滤器功能，数据表keyUp事件自己输入字段。 用CSS或jQuery的你可以隐藏/删除现有的搜索输入字段。 或者，也许数据表有一个设置删除/不包含它。

结帐在这个数据表API文档。

例：

HTML

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

Answer 2:

按@lvkz评论：

如果您使用的是带有大写字母d的DataTable .DataTable()这将返回一个DataTable对象API）使用此：

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

这是@netbrain答案。

如果您使用的小写字母d的DataTable .dataTable()这将返回一个jQuery对象）使用：

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

Answer 3:

您可以使用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。

Answer 4:

这一次让我对数据表1.10.4版本，因为它的新的API

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

Answer 5:

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

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

因为：数据表1.10

-来源： https://datatables.net/reference/api/search（）

Answer 6:

这对您来说应该是工作：（数据表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();
})

Answer 7:

我有同样的问题。

我想发布的所有备选方案，但没有工作，我用的方式是不正确的，但它完美地工作。

示例性搜索输入

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

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

Answer 8:

我想一件事添加到@ netbrain的回答的情况下，有关您使用服务器端处理（见服务器端选项）。

默认情况下，通过数据表（见执行查询限制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);
});

Answer 9:

当使用绘制表格，你可以移动的div fnDrawCallback功能。

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

Answer 10:

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

Answer 11:

如果您正在使用JQuery dataTable的，所以你需要再补充"bFilter":true 。 这将显示默认的搜索框外的表和它的作品dynamically..as每预期

$("#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 - Search Box outside datatable