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

Question

我正在使用 DataTables (datatables.net)，我希望我的搜索框位于表格之外（例如在我的标题 div 中）。

这可能吗？

Answer 1

您可以使用 DataTables api 来过滤表格。因此，您所需要的只是您自己的输入字段，其中包含一个触发 DataTables 的过滤功能的 keyup 事件。使用 css 或 jquery，您可以隐藏/删除现有的搜索输入字段。或者也许 DataTables 有一个设置来删除/不包含它。

查看有关此的 Datatables 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 API 对象），请使用：

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

这是@netbrain 的答案。

如果你正在使用带有小写 d .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

这个帮助我实现了 DataTables 版本 1.10.4，因为它的新 API

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

Answer 5

我遇到了同样的问题。

我尝试了所有发布的替代方法，但没有奏效，我使用了一种不正确的方法，但效果很好。

搜索输入示例

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

Answer 6

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

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

Answer 7

如果您使用服务器端处理，我想在@netbrain's answer 相关的内容中再添加一件事（请参阅serverSide 选项）。

数据表默认执行的查询限制（请参阅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 8

这应该适合你：(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();
})

Answer 9

对于最近和新版本的 DataTables，您应该按照以下步骤操作：

1- searching 选项必须是 true。

2- 隐藏默认搜索输入：

.dataTables_filter {
    display: none;
}

3- 添加新的搜索输入：

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

4- 请求搜索：

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

Answer 10

您可以在使用fnDrawCallback 函数绘制表格时移动 div。

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

Answer 11

$('#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 12

如果您使用的是 JQuery 数据表，那么您只需添加 "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
        });