Datatables - Search Box outside datatable

问题:

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

Is this possible ?

回答1:

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.

Checkout the Datatables API documentation on this.

Example:

HTML

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

回答2:

As per @lvkz comment :

if you are using datatable with uppercase d .DataTable() ( this will return a Datatable API object ) use this :

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

which is @netbrain answer.

if you are using datatable with lowercase d .dataTable() ( this will return a jquery object ) use this :

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

回答3:

You can use the sDom option for this.

Default with search input in its own div:

sDom: 'lftip' 

If you use jQuery UI (bjQueryUI set to true):

sDom: 't' 

The above will put the search/filtering input element into it's own div with a class named search-box that is outside of the actual table.

Even though it uses its special shorthand syntax it can actually take any HTML you throw at it.

回答4:

This one helped me for DataTables Version 1.10.4, because its new API

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

回答5:

More recent versions have a different syntax:

var table = $('#example').DataTable();  // #myInput is a  element $('#myInput').on('keyup change', function () {     table.search(this.value).draw(); }); 

Note that this example uses the variable table assigned when datatables is first initialised. If you don't have this variable available, simply use:

var table = $('#example').dataTable().api();  // #myInput is a  element $('#myInput').on('keyup change', function () {     table.search(this.value).draw(); }); 

Since: DataTables 1.10

https://datatables.net/reference/api/search()

回答6:

This should be work for you:(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(); }) 

回答7:

I want to add one more thing to the @netbrain's answer relevant in case you use server-side processing (see serverSide option).

Query throttling performed by default by datatables (see searchDelay option) does not apply to the .search() API call. You can get it back by using $.fn.dataTable.util.throttle() in the following way:

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

回答8:

You could move the div when the table is drawn using the fnDrawCallback function.

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

回答9:

$('#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.php you may receive the get value:

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

回答10:

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

the jquery code

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

回答11:

If you are using JQuery dataTable so you need to just add "bFilter":true. This will display default search box outside table and its works dynamically..as per expected

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

文章来源: Datatables - Search Box outside datatable