Datatables - Pole wyszukiwania poza datowalnym

Question

Używam DataTables (datatables.net) i chciałbym, aby moje pole wyszukiwania znajdowało się poza tabelą (na przykład w moim nagłówku div).

Czy to możliwe?

Answer 1

Możesz użyć interfejsu API DataTables do filtrowania tabeli. Więc wszystko, czego potrzebujesz, to własne pole wejściowe ze zdarzeniem keyup, które uruchamia funkcję filtrowania w DataTables. Za pomocą css lub jquery możesz ukryć/usunąć istniejące pole wyszukiwania. A może DataTables ma ustawienie do usunięcia/nie-uwzględnienia go.

Sprawdź dokumentację interfejsu API Datatables na ten temat.

Przykład:

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

Można użyć opcji sDom do tego.

Domyślnie z wejściem wyszukiwania we własnej div:

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

Jeśli używasz jQuery UI (bjQueryUI zestaw do true):

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

Powyższy położy wyszukiwanie/filtrowanie elementu input do własnego div z klasą o nazwie search-box, która znajduje się poza rzeczywistą tabelą .

Mimo że używa swojej specjalnej skróconej składni, może w rzeczywistości wziąć dowolny HTML, który na nią rzucisz.

Answer 3

Można przesunąć element div, gdy tabela zostanie narysowana za pomocą funkcji fnDrawCallback.

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

Answer 4

Ten pomógł mi na DataTables wersji 1.10.4, ponieważ jego nowy API

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

Answer 5

Zgodnie komentarzu @lvkz:

jeśli używasz DataTable z wielką d .DataTable() (ta zwróci obiekt Datatable API) użyj tego:

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

który jest @n odpowiedź etbrain.

jeśli używasz DataTable z małymi d .dataTable() (będzie to zwraca obiekt jquery) użyj:

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

W loadtransajax.php może pojawić się wartość otrzymujemy:

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

Answer 7

Jeśli używasz JQuery dataTable, musisz tylko dodać "bFilter":true. Spowoduje to wyświetlenie domyślnego pola wyszukiwania poza stół i jego dzieła dynamically..as za spodziewane

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

ta powinna być praca dla Ciebie: (DataTables 1.10.7)

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

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

lub

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

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

Answer 9

Nowsze wersje mają inną składnię:

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

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

Należy zauważyć, że w tym przykładzie użyto zmiennej table przypisanej podczas inicjowania datatables. Jeśli nie masz zmienna ta dostępna, wystarczy użyć:

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

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

od: DataTables 1.10

- Źródło: https://datatables.net/reference/api/search()

Answer 10

miałem ten sam problem.

Próbowałem wszystkich opublikowanych alternatyw, ale bez pracy, użyłem sposobu, który nie jest właściwy, ale działał idealnie.

Przykład wyszukiwania kod wejściowy

<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

chcę dodać jeszcze jedną rzecz do @netbrain's answer właściwego w przypadku używanej przetwarzanie po stronie serwera (patrz serverSide opcję).

Przepustowość kwerendy przeprowadzona domyślnie przez datatables (zobacz opcję searchDelay) nie ma zastosowania do wywołania API .search(). Możesz go odzyskać, używając $.fn.dataTable.util.throttle() w następujący sposób:

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