Datatables - 數據表外面的搜索框

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

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

當使用fnDrawCallback函數繪製表格時，您可以移動div。

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

Answer 4

這一個幫助我的數據表1.10.4版本，因爲它的新的API

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

Answer 5

按@lvkz評論：

如果你正在使用的數據表與大寫d .DataTable()（此將返回一個Datatable API對象）使用這個：

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

這是@n etbrain回答。

如果你正在使用的數據表與小寫字母d .dataTable()（這將返回一個jQuery對象）使用此：

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

Answer 6

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

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

Answer 8

這對您來說應該是工作：（數據表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

更新版本的語法不同：

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 10

我有同樣的問題。

我嘗試了所有替代方法發佈，但沒有工作，我用了一種不正確的方式，但它的工作完美。

實例搜索輸入

<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 11

我想一件事添加到您使用服務器端處理的情況下，相關的@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); 
});