web-dev-qa-db-fra.com

Datatables - Zone de recherche en dehors de la datatable

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

Est-ce possible ?

jquerysearchdatatablesfiltering
96
Athanasios Emmanouilidis

Vous pouvez utiliser l’API DataTables pour filtrer la table. Donc, tout ce dont vous avez besoin est votre propre champ de saisie avec un événement keyup qui déclenche la fonction de filtrage de DataTables. Avec css ou jquery, vous pouvez masquer/supprimer le champ de saisie 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() ;
})
187
netbrain

Selon le commentaire @lvkz: 

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

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

qui est la réponse @netbrain. 

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

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

Vous pouvez utiliser l'option sDom pour cela.

Défaut avec une entrée de recherche dans son propre div:

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

Si vous utilisez l'interface utilisateur jQuery (bjQueryUI défini sur true):

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

La procédure ci-dessus place l'élément de recherche/filtrage input dans sa propre variable div avec une classe nommée search-box située en dehors de la table réelle.

Même s'il utilise sa syntaxe abrégée spéciale, il peut prendre n'importe quel code HTML.

14
mekwall

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

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 table attribuée lors de la première initialisation de datatables. 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 ()

6
Jonny

Cela devrait être un travail 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();
})
4
Sky Yip

Je souhaite ajouter une dernière chose à la réponse de @ netbrain pertinente si vous utilisez un traitement côté serveur (voir serverSide option).

La limitation de requête effectuée par défaut par les tables de données (voir searchDelay option) ne s'applique pas à l'appel d'API .search(). 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);
});
3
citxx

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

J'ai essayé toutes les alternatives affichées, mais pas de travail, j'ai utilisé une méthode qui ne va pas 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();
});
2
Bruno Ribeiro
$('#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.php, vous 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 .= ')';
}
1
Senanayaka

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

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

Si vous utilisez JQuery dataTable, vous devez simplement ajouter "bFilter":true. Ceci affichera la boîte de recherche par défaut en dehors de la table et son fonctionnement sera dynamique. 

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