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

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?

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

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
                 } );
} );

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

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

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

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

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

wenn Sie themeroller verwenden:

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

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'
});

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

in Ihrem datierbaren Konstruktor

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

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">'
 } );
} );

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'

});

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'
    ]
 });

Sie könnten sie über CSS verstecken:

#example_info, #example_filter{display: none}

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.

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.

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.

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.

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.