web-dev-qa-db-fra.com

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) ajoutés au tableau par défaut. Je veux juste utiliser ce plugin pour trier, fondamentalement. Cela peut-il être fait?

jqueryhtmldatatables
216
leora

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; }
414
antpaw

Consultez http://www.datatables.net/examples/basic_init/filter_only.html pour obtenir 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
                 } );
} );
86
Eric

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, sans en-tête ni pied de page ni quoi que ce soit.

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

36
Scott Stafford

Si vous utilisez un filtre personnalisé, vous voudrez peut-être masquer le champ de recherche, mais également activer la fonction de filtrage, de sorte que bFilter: false ne soit pas la solution. Utilisez dom: 'lrtp' à la place, la valeur par défaut est 'lfrtip'. Documentation: https://datatables.net/reference/option/dom

18
sulaiman sudirman
var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});
7
Pietro La Grotta

Une façon rapide et sale est de trouver la classe du pied de page et de le cacher en utilisant jQuery ou CSS:

$(".dataTables_info").hide();
6
kgiannakakis
<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

4
Gaurav Bhatra

si vous utilisez themeroller:

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

Cela peut être fait simplement en changeant la configuration:

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

Mais pour cacher le pied de page vide; ce morceau de code fait le tour:

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

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

});
3
Shayan Sulehri

Ici, vous pouvez ajouter à 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">'
 } );
} );
3
venky

Comme l'a 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 correctif actuel, cette propriété est maintenant dom.

Cette propriété permet également de définir une classe ou un identifiant sur un élément, ce qui simplifie l’élégance.

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

Cet exemple ne montrerait que la table:

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

Vous pouvez utiliser l'attribut sDom. Le code ressemble à quelque chose comme ça.

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

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

1
Justget Meinside

Vous pouvez les cacher via css:

#example_info, #example_filter{display: none}
1
graphicdivine

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

Si vous rencontrez le même problème, vous pouvez définir searching et paging false en initialisant DataTable sur votre HTML <table> comme ceci

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

Je pense que le moyen le plus simple est:

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

Vous ne pouvez éditer que la table que vous devez modifier, sans changer les CSS ou JS courants.

0
WalterV

J'ai fait cela en attribuant un identifiant au pied de page, puis en utilisant 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 méthodes ne fonctionnent pas pour moi.

0
newProgramer

À partir de DataTables 1.10.5, il est maintenant possible de définir l’initialisation options utilisant les attributs HTML5 data- *.

- Documentation de dataTables: attributs de données HTML5 * - options de table

Ainsi, vous pouvez spécifier data-searching="false" data-paging="false" data-info="false" sur la table. Par exemple, cette table n'autorisera pas la recherche, n'appliquera la pagination ni ne montrera le bloc d'information:

<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.-à-d. $('table.apply_dataTables').DataTable()) tout en pouvant configurer les options de dataTables table par table.

0
Jeromy French
hello friends you can add simply searching: false in your js





$('#companies_grid').DataTable({
        responsive: true,
        searching: false,
        iDisplayLength: 25,
        "ajax": base_url + "companies/company_table",
        "columns": [{
                "data": "SRNO"
            },
            {
                "data": "CompanyName"
            },
            {
                "data": "Country"
            },
            {
                "data": "CustomDomain"
            },
            {
                "data": "Email"
            },
            {
                "data": "Edit"
            }
        ]
    });
0
Mohammad Malek