Wie Entferne ich die Suchleiste und Fußzeilen Hinzugefügt werden, indem Sie die jQuery-DataTables-plugin?

Question

Ich bin mit jQuery DataTables.

Ich möchte zum entfernen der Suchleiste und footer (der anzeigt, wie viele Zeilen, die dort sichtbar sind), die der Tabelle Hinzugefügt wird standardmäßig.Ich möchte nur zu verwenden dieses plugin zum Sortieren, im Grunde.Kann das getan werden?

Answer 1

Tables> = 1.10 , verwenden Sie:

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

Tables <1.10 , verwenden Sie:

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

oder mit reinem CSS:

.dataTables_filter, .dataTables_info { display: none; }

Answer 2

Schauen Sie sich http://www.datatables.net/examples/basic_init/filter_only.html eine Liste der Funktionen anzuzeigen / auszublenden.

Was Sie wollen, ist "bfilter" und "BINFO" auf false setzen;

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

Answer 3

Sie können auch nicht die Kopf- oder Fußzeile auf alle durch Einstellung sDom ziehen: http://datatables.net / Nutzung / Optionen # sDom

'sDom': 't' 

wird erst die Tabelle angezeigt werden, keine Kopf- oder Fußzeilen oder sonst etwas.

Es wird einige hier diskutiert: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Answer 4

Wenn Sie benutzerdefinierte Filter verwenden, können Sie ausblenden Suchfeld wollen, wollen aber trotzdem die Filterfunktion aktivieren, so bFilter: false nicht der richtige Weg ist. Verwenden dom: 'lrtp' stattdessen ist standardmäßig 'lfrtip'. Dokumentation: https://datatables.net/reference/option/dom

Answer 5

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

Answer 6

Eine schnelle und schmutzige Art und Weise ist die Klasse der Fußzeile, um herauszufinden, und versteckt es jQuery oder CSS:

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

Answer 7

, wenn Sie mit Themeroller:

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

Answer 8

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

in Ihrem Datatable-Konstruktor

https: // Datentabellen. net / Foren / Diskussion / 20006 / how-to-remove-Cross-icon-in-search-box

Answer 9

Hier gelangen Sie zu sDom Element, um Ihren Code hinzufügen können, ist Top-Suchleiste versteckt.

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

Answer 10

Wie gesagt @ Scott Stafford sDOM ist die apropiated Eigenschaft zu zeigen, verstecken oder die Elemente zu verlagern, die die Datentabellen zusammensetzen. Ich denke, die sDOM ist jetzt veraltet, mit dem aktuellen Patch ist diese Eigenschaft jetzt dom.

Diese Eigenschaft ermöglicht auch eine gewisse Klasse oder ID zu einem Element zu setzen, so können Sie leichter stilvoll.

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

In diesem Beispiel würde nur die Tabelle zeigen:

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

Answer 11

Dies kann durch einfaches Ändern der Konfiguration vorgenommen werden:

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

Aber zu verstecken die leere Fußzeile; dieses Stück Code funktioniert der Trick:

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

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

});

Answer 12

Nur zur Erinnerung kann man nicht initialisieren DataTable auf demselben <table> Elemente zweimal.

Wenn Sie gleiche Problem auftritt, dann können Sie searching und paging false gesetzt, während Datatable Initialisierung auf HTML <table> wie diese

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

Answer 13

Sie könnten sie über CSS verstecken:

#example_info, #example_filter{display: none}

Answer 14

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

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

Es verbirgt suchen-und pager-box.

Answer 15

  

Ab Tables 1.10.5 es nun möglich ist, die Initialisierung zu definieren   Optionen mit HTML5 Daten- * Attribute.

- Tables Dokumentation: HTML5 Daten- * Attribute - Tabellenoptionen

So können Sie data-searching="false" data-paging="false" data-info="false" auf dem table angeben. Zum Beispiel wird diese Tabelle nicht erlaubt die Suche gilt Paging oder den Informationsblock zeigen:

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

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

Der Vorteil dieses Ansatzes ist, dass es Ihnen ein Standard-Datentabellen Aufruf haben können (dh $('table.apply_dataTables').DataTable()), während in der Lage, die Datentabellen Optionen Tabelle-by-Tabelle zu konfigurieren.

Answer 16

Ich habe dies getan, indem Fußzeile einer ID zuweisen und dann CSS-Styling mit:

    <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 CSS-Styling mit:

#FooterHidden{
   display: none;
}

Wie oben erwähnt Wege sind nicht für mich arbeiten.

Answer 17

Ich denke, der einfachste Weg ist:

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

Sie können bearbeiten nur die Tabelle, die Sie ändern müssen, ohne Änderung gemeinsame CSS oder JS.