Datatables - Boîte de Recherche à l'extérieur de datatable

Vous pouvez utiliser les tables de données de l'api pour filtrer la table. De sorte que tous vous avez besoin est votre propre champ de saisie avec un événement keyup qui déclenche la fonction de filtre pour les tables de données. Avec css ou jquery vous pouvez masquer/supprimer l'existant champ de saisie de recherche. Ou peut-être les tables de données dispose d'une option pour supprimer à ne pas l'inclure.

La caisse de la Datatables documentation de l'API sur ce.

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

Vous pouvez utiliser le sDom option pour cela.

Défaut de saisie de recherche dans son propre div:

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

Si vous utilisez jQuery UI (bjQueryUI ensemble de true):

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

La ci-dessus sera mis à la recherche/filtrage input élément dans son propre div avec une classe nommée search-box qui est en dehors de la table.

Même si elle utilise ses courts spéciaux syntaxe il peut prendre n'importe quel code HTML jeter à elle.

Des 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 table attribué lors de tables de données est d'abord initialisé. Si vous n'avez pas cette variable est disponible, il suffit d'utiliser:

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

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

J'ai essayé toutes les solutions de rechange posté, mais pas de travail, j'ai utilisé d'une manière qui n'est pas droit, mais cela a fonctionné parfaitement.

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

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

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

Si vous utilisez JQuery datatables, de sorte que vous devez juste ajouter "bFilter":true. Ceci permet d'afficher la boîte de recherche par défaut à l'extérieur de la table et de ses œuvres de façon dynamique..comme prévu par

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