Comment puis-je supprimer la barre de recherche et le pied de page ajoutés par le plugin jQuery DataTables?

J'utilise jQuery DataTables .

Je souhaite supprimer la barre de recherche et le pied de page (indiquant le nombre de lignes visibles) qui sont ajoutés au tableau par défaut. Je veux juste utiliser ce plugin pour le tri, en gros. Cela peut-il être fait?

Pour DataTables> = 1.10 , utilisez:

$('table').dataTable({searching: false, paging: false, info: false});

Pour DataTables <1.10 , utilisez:

$('table').dataTable({bFilter: false, bInfo: false});

ou en utilisant du CSS pur:

.dataTables_filter, .dataTables_info { display: none; }

Consultez http://www.datatables.net/examples/basic_init/filter_only.html pour une liste des fonctionnalités à afficher / masquer.

Ce que vous voulez, c'est définir "bFilter" et "bInfo" sur false;

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );

Vous ne pouvez pas non plus dessiner l'en-tête ou le pied de page en définissant sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

affichera JUSTE la table, pas d'en-têtes ou de pieds de page ou quoi que ce soit.

Il en est question ici: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Si vous utilisez un filtre personnalisé, vous souhaiterez peut-être masquer la zone de recherche, mais vous souhaiterez toujours activer la fonction de filtrage, ce bFilter: falsen'est pas le cas. Utilisez à la dom: 'lrtp'place, la valeur par défaut est 'lfrtip'. Documentation: https://datatables.net/reference/option/dom

var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});

Un moyen rapide et sale est de trouver la classe du pied de page et de la masquer à l'aide de jQuery ou CSS:

$(".dataTables_info").hide();

si vous utilisez le rouleau:

.dataTables_wrapper .fg-toolbar { display: none; }

Comme l'a dit @Scott Stafford sDOMest la propriété la plus appropriée pour afficher, masquer ou déplacer les éléments qui composent les DataTables. Je pense que le sDOMest désormais obsolète, avec le correctif réel que cette propriété est maintenant dom.

Cette propriété permet également de définir une classe ou un identifiant pour un élément, afin que vous puissiez styler plus facilement.

Consultez la documentation officielle ici: https://datatables.net/reference/option/dom

Cet exemple n'afficherait que le tableau:

$('#myTable').DataTable({
    "dom": 't'
});

<script>
$(document).ready(function() {
    $('#nametable').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    });
});
</script>

dans votre constructeur datatable

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

Ici, vous pouvez ajouter un sDomélément à votre code, la barre de recherche supérieure est masquée.

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

Cela peut être fait en changeant simplement la configuration:

$('table').dataTable({
      paging: false, 
      info: false
 });

Mais pour cacher le pied de page vide; ce morceau de code fait l'affaire:

 $('table').dataTable({
      paging: false, 
      info: false,

      //add these config to remove empty header
      "bJQueryUI": true,
      "sDom": 'lfrtip'

});

Juste un rappel que vous ne pouvez pas initialiser deux fois DataTablele même <table>élément.

Si vous rencontrez le même problème, vous pouvez définir searchinget pagingfalse lors de l'initialisation de DataTable sur votre HTML <table>comme ceci

 $('#tbl').DataTable({
    searching: false, 
    paging: false,
    dom: 'Bfrtip',
    buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
    ]
 });

Vous pouvez les masquer via css:

#example_info, #example_filter{display: none}

Vous pouvez utiliser l'attribut sDom. Le code ressemble à ceci.

$(document).ready(function() {
    $('#example').dataTable( {
        'sDom': '"top"i'
                 } );
} );

Il cache la boîte de recherche et de pager.

Depuis DataTables 1.10.5, il est désormais possible de définir des options d'initialisation à l'aide d'attributs HTML5 data- *.

- documentation dataTables: attributs HTML5 data- * - options de table

Vous pouvez donc spécifier data-searching="false" data-paging="false" data-info="false"sur le table. Par exemple, ce tableau ne permettra pas de rechercher, d'appliquer la pagination ou d'afficher le bloc d'informations:

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Voir un exemple de travail sur https://jsfiddle.net/jhfrench/17v94f2s/ .

L'avantage de cette approche est qu'elle vous permet d'avoir un appel dataTables standard (c'est-à-dire $('table.apply_dataTables').DataTable()) tout en étant capable de configurer les options dataTables table par table.

J'ai fait cela en attribuant un identifiant au pied de page, puis en utilisant le style CSS:

    <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
     <thead>
        <tr>
            <th></th>

        </tr>
    </thead>
 <tfoot>
    <tr>
            <th id="FooterHidden"></th>
    </tr>
</tfoot>
<tbody>

    <tr>

                <td class="copyableField"></td>

    </tr>
 </tbody>
</table>

puis styling en utilisant css:

#FooterHidden{
   display: none;
}

Comme mentionné ci-dessus, les moyens ne fonctionnent pas pour moi.

Je pense que la manière la plus simple est:

<th data-searchable="false">Column</th>

Vous pouvez modifier uniquement le tableau que vous devez modifier, sans changer le CSS ou le JS communs.

Si vous souhaitez uniquement masquer le formulaire de recherche, par exemple, parce que vous avez des filtres d'entrée de colonne ou peut-être parce que vous avez déjà un formulaire de recherche CMS capable de renvoyer les résultats du tableau, il vous suffit d'inspecter le formulaire et d'obtenir son identifiant - (au moment de la rédaction de ce document, il ressemble à cela [tableid]-table_filter.dataTables_filter). Ensuite, [tableid]-table_filter.dataTables_filter{display:none;}conservez simplement toutes les autres fonctionnalités des tables de données.