Wie kann ich die Suchleiste und Fußzeile entfernen, die vom jQuery DataTables-Plugin hinzugefügt wurden?

252

Ich verwende jQuery DataTables .

Ich möchte die Suchleiste und Fußzeile (die anzeigt, wie viele Zeilen sichtbar sind) entfernen, die standardmäßig zur Tabelle hinzugefügt werden. Ich möchte dieses Plugin im Grunde nur zum Sortieren verwenden. Kann das gemacht werden?

Leora
quelle
Sie können sDomwie hier beschrieben effizient nutzen - stackoverflow.com/a/53885264/5729813
Tushar Walzade

Antworten:

486

Verwenden Sie für DataTables> = 1.10 :

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

Verwenden Sie für DataTables <1.10 :

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

oder mit reinem CSS:

.dataTables_filter, .dataTables_info { display: none; }
Ameisenpfote
quelle
7
So gut ein @ antpaw-Kommentar ist und in den meisten Fällen zu funktionieren scheint, funktioniert er nicht, wenn für jede Spalte eine Filterung durchgeführt wird, wie in diesem Beispiel: datatables.net/release-datatables/extras/FixedColumns/… . Sei vorsichtig!
Janis Peisenieks
@JanisPeisenieks Die Beispiel - URL ist gebrochen: datatables.net/extensions/fixedcolumns
antpaw
7
Ich verstehe nicht, warum dies akzeptiert wird, da es die Frage nicht beantwortet. Das Problem bestand darin, die Suchleiste und die Fußzeile zu entfernen und die Suche nicht vollständig zu deaktivieren.
Benutzer1563544
Um die Fußzeile vollständig zu entfernen, müssen Sie einstellen paging:falseund info:falsenicht nurpaging:false
Mike D3ViD Tyson
1
Gibt es eine Möglichkeit, die Suchleiste auszublenden und die Funktionalität NICHT zu deaktivieren, wenn Sie den Kommentar von @ user1563544 hinzufügen? (außer CSS-Tricks?)
vignz.pie
88

Unter http://www.datatables.net/examples/basic_init/filter_only.html finden Sie eine Liste der Funktionen, die angezeigt / ausgeblendet werden sollen.

Sie möchten "bFilter" und "bInfo" auf false setzen.

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );
Eric
quelle
@ Eric danke, dass es für mich funktioniert, aber ich möchte "bPaginate" zeigen, nur ich möchte "binfo" nicht zeigen, wie ich implementieren kann, wenn ich "bInfo" = false und "bPaginate" = true gemacht habe, dann werden beide angezeigt
Amit
In der neuesten Version von DataTables ist nur{paging: false, info: false}
Josemmo
42

Sie können die Kopf- oder Fußzeile auch überhaupt nicht zeichnen, indem Sie Folgendes festlegensDom : http://datatables.net/usage/options#sDom

'sDom': 't' 

zeigt NUR die Tabelle an, keine Kopf- oder Fußzeilen oder irgendetwas.

Einige davon werden hier besprochen: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Scott Stafford
quelle
2
Dies sollte zu Antpaws Antwort hinzugefügt werden. Dadurch werden die Filter- und Info-Platzhalter-Divs, die beim Übergeben von "bFilter": false, "bInfo": false noch vorhanden sind, effektiv ausgeblendet.
Tibc-Dev
Dadurch wird die Paginierung in der Fußzeile entfernt. Ich denke nicht, dass es eine gute Praxis ist.
Anirudh
1
Es heißt jetzt 'dom' und Sie können mit dieser Option viel mehr steuern. Siehe datatables.net/reference/option/dom
unkreativ
1
Dies ist eigentlich die richtige Antwort. Die anderen Antworten mit CSS- und JS-Optimierungen sind alle Hacks. Wenn Sie DataTables ordnungsgemäß verwenden möchten, gehen Sie wie folgt vor. Als Beispiel , wenn Sie alle Bits und Stücke (Paging, Seitenlänge etc.) , außer für das Suchfeld angezeigt werden sollen, würden Sie eine hinzufügen domEigenschaft mit einem Wert von ltiprsee datatables.net/reference/option/dom
onefootswill
26

Wenn Sie einen benutzerdefinierten Filter verwenden, möchten Sie möglicherweise das Suchfeld ausblenden, aber dennoch die Filterfunktion aktivieren. Dies ist also bFilter: falsenicht der Fall. Verwenden Sie dom: 'lrtp'stattdessen standardmäßig 'lfrtip'. Dokumentation: https://datatables.net/reference/option/dom

Sulaiman Sudirman
quelle
10
var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});
Pietro La Grotta
quelle
7

Eine schnelle und schmutzige Möglichkeit besteht darin, die Klasse der Fußzeile herauszufinden und sie mit jQuery oder CSS auszublenden:

$(".dataTables_info").hide();
kgiannakakis
quelle
4

wenn Sie themeroller verwenden:

.dataTables_wrapper .fg-toolbar { display: none; }
paja01
quelle
+1 Danke, das hat mich in die richtige Richtung gelenkt. Ich wollte auch nicht die Kopfzeile ausblenden, also wollte ich nur die Fußzeile. Die Klassen ui-Corner-Bl und Ui-Corner-Br werden nur auf die Fußzeile angewendet, daher habe ich eine der beiden Klassen verwendet, um den Fußzeilen-Wrapper zu erhalten ........ $ (". ui-Corner-Bl"). hide ( );
Kevbo
4

Wie von @Scott gesagt, ist Stafford sDOMdie am besten geeignete Eigenschaft, um die Elemente, aus denen die DataTables bestehen, anzuzeigen, auszublenden oder zu verschieben. Ich denke das sDOMist jetzt veraltet, mit dem eigentlichen Patch ist diese Eigenschaft jetztdom .

Mit dieser Eigenschaft können Sie auch eine Klasse oder ID für ein Element festlegen, um die Gestaltung zu vereinfachen.

Überprüfen Sie die offizielle Dokumentation hier: https://datatables.net/reference/option/dom

Dieses Beispiel würde nur die Tabelle zeigen:

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

Hier können Sie sDomIhrem Code ein Element hinzufügen. Die obere Suchleiste ist ausgeblendet.

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

Dies kann durch einfaches Ändern der Konfiguration erfolgen:

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

Aber um die leere Fußzeile zu verstecken; Dieser Code macht den Trick:

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

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

});
Shayan Sulehri
quelle
2

Nur zur Erinnerung, Sie können nicht zweimal DataTabledasselbe <table>Element initialisieren .

Wenn Sie gleiches Problem auftreten , dann können Sie einstellen , searchingund pagingfalsch , während Datentabelle auf Ihrem HTML Initialisierung <table>wie folgt aus

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

Sie könnten sie über CSS verstecken:

#example_info, #example_filter{display: none}
Grafikgöttlich
quelle
Nicht "falsch", nur anders. Es hängt davon ab, ob Sie alle Instanzen (nach Klasse, wie in Ihrer Antwort) oder eine bestimmte Instanz (nach ID, wie in meiner) ausblenden möchten.
Graphicdivine
1

Sie können das sDom-Attribut verwenden. Code sieht ungefähr so ​​aus.

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

Es versteckt Such- und Pager-Box.

Justget Meinside
quelle
1

Ab DataTables 1.10.5 können jetzt Initialisierungsoptionen mithilfe von HTML5-Daten- * -Attributen definiert werden.

- dataTables-Dokumentation: HTML5-Daten- * Attribute - Tabellenoptionen

So können Sie data-searching="false" data-paging="false" data-info="false"auf dem angeben table. In dieser Tabelle ist es beispielsweise nicht möglich, zu suchen, Paging anzuwenden oder den Informationsblock anzuzeigen:

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

Sehen Sie ein funktionierendes Beispiel bei https://jsfiddle.net/jhfrench/17v94f2s/ .

Der Vorteil dieses Ansatzes besteht darin, dass Sie einen Standardaufruf für dataTables (dh $('table.apply_dataTables').DataTable()) ausführen können , während Sie die dataTables-Optionen tabellenweise konfigurieren können.

Jeromy Französisch
quelle
0

Ich habe dies getan, indem ich der Fußzeile eine ID zugewiesen und dann mit CSS gestylt habe:

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

dann Styling mit CSS:

#FooterHidden{
   display: none;
}

Wie oben erwähnt, funktionieren die Wege bei mir nicht.

newProgramer
quelle
0

Ich denke, der einfachste Weg ist:

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

Sie können nur die Tabelle bearbeiten, die Sie ändern müssen, ohne das allgemeine CSS oder JS zu ändern.

WalterV
quelle
0

Wenn Sie das Suchformular nur ausblenden möchten, z. B. weil Sie Spalteneingabefilter haben oder weil Sie bereits über ein CMS-Suchformular verfügen, das Ergebnisse aus der Tabelle zurückgeben kann, müssen Sie nur das Formular überprüfen und seine ID abrufen. (Zum Zeitpunkt des Schreibens sieht es so aus [tableid]-table_filter.dataTables_filter). [tableid]-table_filter.dataTables_filter{display:none;}Behalten Sie dann einfach alle anderen Funktionen von Datentabellen bei.

Herbert Kimani
quelle