Dane - pole wyszukiwania poza datatable

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

Czy to możliwe ?

Do filtrowania tabeli można użyć interfejsu API DataTables. Więc wszystko, czego potrzebujesz, to własne pole wejściowe ze zdarzeniem keyup, które wyzwala funkcję filtru do DataTables. Za pomocą css lub jquery możesz ukryć / usunąć istniejące pole wyszukiwania. A może DataTables ma ustawienie umożliwiające jego usunięcie / niewłączenie.

Zapoznaj się z dokumentacją interfejsu Datatables API 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() ;
})

Zgodnie z komentarzem @lvkz:

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

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

czyli odpowiedź @netbrain.

jeśli używasz datatable z małą literą d .dataTable()(zwróci to obiekt jquery), użyj tego:

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

Możesz użyć sDomdo tego opcji.

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

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

Jeśli używasz interfejsu użytkownika jQuery ( bjQueryUIustawiony na true):

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

Powyższe spowoduje umieszczenie elementu wyszukiwania / filtrującego inputwe własnym divz klasą o nazwie, search-boxktóra znajduje się poza rzeczywistą tabelą.

Mimo że używa swojej specjalnej skróconej składni, może faktycznie przyjąć dowolny HTML, który do niego rzucisz.

Ten pomógł mi w przypadku DataTables w wersji 1.10.4, ponieważ jego nowy interfejs API

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

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 tableprzypisanej podczas pierwszej inicjalizacji zbiorów danych. Jeśli nie masz dostępnej tej zmiennej, po prostu użyj:

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

To powinno działać 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();
})

Miałem ten sam problem.

Wypróbowałem wszystkie opublikowane alternatywy, ale bez pracy, użyłem niewłaściwego sposobu, ale działał idealnie.

Przykładowe hasło wyszukiwania

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

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

Chcę dodać jeszcze jedną rzecz do odpowiedzi @ netbrain, istotną w przypadku korzystania z przetwarzania po stronie serwera (patrz serverSide opcja ).

Ograniczanie zapytań wykonywane domyślnie przez dane (patrz opcja searchDelay ) nie ma zastosowania do .search()wywołania API. 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);
});

Możesz przenieść element div podczas rysowania tabeli za pomocą fnDrawCallbackfunkcji.

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

$('#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.phpmożesz otrzymać wartość get:

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

Jeśli używasz JQuery dataTable, musisz po prostu dodać "bFilter":true. Spowoduje to wyświetlenie domyślnego pola wyszukiwania poza tabelą i działa dynamicznie zgodnie z oczekiwaniami

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