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

J’utilise jQuery DataTables .

Je souhaite supprimer la barre de recherche et le pied de page (indiquant le nombre de lignes visibles) ajoutés par défaut à la table. Je veux juste utiliser ce plugin pour le sorting, fondamentalement. Est-ce que cela peut ê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; } 

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

Ce que vous voulez, c’est mettre “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 JUST le tableau, pas d’en-tête ni de pied de page, ni rien.

On en a discuté 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 souhaitez toujours activer la fonction de filtrage, alors bFilter: false n’est pas la solution. Utilisez plutôt dom: 'lrtp' , la valeur par défaut est 'lfrtip' . Documentation: https://datatables.net/reference/option/dom

Un moyen rapide et sale consiste à trouver la classe du pied de page et à la cacher en utilisant jQuery ou CSS:

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

si vous utilisez themeroller:

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

dans votre constructeur datatable

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

Ici, vous pouvez append à l’élément sDom à 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' }); 

Vous pouvez utiliser l’atsortingbut sDom. Code ressemble à quelque chose comme ça.

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

Il cache la boîte de recherche et de téléavertisseur.

Comme le dit @Scott Stafford, sDOM est la propriété la plus appropriée pour afficher, masquer ou déplacer les éléments qui composent les DataTables. Je pense que la sDOM est maintenant obsolète, avec le patch actuel, cette propriété est maintenant dom .

Cette propriété permet également de définir une classe ou un identifiant pour un élément, ce qui vous permet de créer plus facilement un style.

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

Cet exemple montrerait seulement la table:

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

Juste un rappel, vous ne pouvez pas initialiser DataTable sur le même élément

deux fois.

Si vous rencontrez le même problème, vous pouvez définir la searching et la paging incorrecte lors de l’initialisation de DataTable sur votre HTML

comme ceci

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

Vous pouvez les cacher via css:

 #example_info, #example_filter{display: none} 

Je l’ai fait en atsortingbuant un identifiant au pied de page, puis en utilisant le style css:

  

puis styling en utilisant css:

 #FooterHidden{ display: none; } 

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

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

 Column 

Vous ne pouvez éditer que la table à modifier, sans modifier les CSS ou JS communs.