Datatables - Zone de recherche hors datatable

J'utilise DataTables ( datatables.net ) et je voudrais que mon champ de recherche soit en dehors du tableau (par exemple dans mon en-tête div).

Est-ce possible ?

Vous pouvez utiliser l'API DataTables pour filtrer la table. Donc, tout ce dont vous avez besoin est votre propre champ d'entrée avec un événement keyup qui déclenche la fonction de filtre vers DataTables. Avec css ou jquery, vous pouvez masquer / supprimer le champ d'entrée de recherche existant. Ou peut-être que DataTables a un paramètre pour le supprimer / ne pas l'inclure.

Consultez la documentation de l'API Datatables à ce sujet.

Exemple:

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

Selon le commentaire de @lvkz:

si vous utilisez datatable avec d majuscule .DataTable()(cela retournera un objet API Datatable), utilisez ceci:

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

qui est la réponse @netbrain.

si vous utilisez datatable avec un d minuscule .dataTable()(cela retournera un objet jquery), utilisez ceci:

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

Vous pouvez utiliser l' sDomoption pour cela.

Par défaut avec l'entrée de recherche dans son propre div:

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

Si vous utilisez jQuery UI ( bjQueryUIdéfini sur true):

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

Ce qui précède mettra l' inputélément de recherche / filtrage dans son propre divavec une classe nommée search-boxqui est en dehors de la table réelle.

Même s'il utilise sa syntaxe abrégée spéciale, il peut en fait prendre n'importe quel HTML que vous lui lancez.

Celui-ci m'a aidé pour DataTables Version 1.10.4, car sa nouvelle API

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

Les versions plus récentes ont une syntaxe différente:

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

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

Notez que cet exemple utilise la variable tableaffectée lors de la première initialisation des tables de données. Si vous n'avez pas cette variable disponible, utilisez simplement:

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

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

Depuis: DataTables 1.10

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

Cela devrait fonctionner pour vous: (DataTables 1.10.7)

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

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

ou

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

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

J'ai eu le même problème.

J'ai essayé toutes les alternatives affichées, mais pas de travail, j'ai utilisé un moyen qui n'est pas correct mais qui a parfaitement fonctionné.

Exemple d'entrée de recherche

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

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

Je veux ajouter une autre chose à la réponse de @ netbrain pertinente au cas où vous utilisez le traitement côté serveur (voir serverSide option ).

La limitation des requêtes effectuée par défaut par les tables de données (voir l' option searchDelay ) ne s'applique pas à l' .search()appel d'API. Vous pouvez le récupérer en utilisant $ .fn.dataTable.util.throttle () de la manière suivante:

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

Vous pouvez déplacer le div lorsque le tableau est dessiné à l'aide de la fnDrawCallbackfonction.

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

Dans loadtransajax.phpvous pouvez recevoir la valeur get:

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

Si vous utilisez JQuery dataTable, vous devez simplement ajouter "bFilter":true. Cela affichera la zone de recherche par défaut en dehors de la table et son fonctionnement de manière dynamique..comme prévu

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