web-dev-qa-db-de.com

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

Ich verwende jQuery DataTables

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

216
leora

Für DataTables> = 1.10 verwenden Sie: 

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

Für DataTables <1.10 verwenden Sie: 

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

oder mit reinem CSS:

.dataTables_filter, .dataTables_info { display: none; }
414
antpaw

Check out http://www.datatables.net/examples/basic_init/filter_only.html , um eine Liste der Funktionen anzuzeigen/auszublenden.

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

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

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

'sDom': 't' 

zeigt nur die Tabelle an, keine Kopf- oder Fußzeilen oder ähnliches.

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

36
Scott Stafford

Wenn Sie einen benutzerdefinierten Filter verwenden, möchten Sie möglicherweise das Suchfeld ausblenden, die Filterfunktion jedoch weiterhin aktivieren, sodass bFilter: false nicht der Fall ist. Verwenden Sie stattdessen dom: 'lrtp', der Standardwert ist 'lfrtip'. Dokumentation: https://datatables.net/reference/option/dom

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

Eine schnelle und schmutzige Methode ist, die Klasse der Fußzeile herauszufinden und sie mit jQuery oder CSS auszublenden:

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

in Ihrem datatable-Konstruktor

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

4
Gaurav Bhatra

wenn Sie den Roller verwenden:

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

Dies kann durch einfaches Ändern der Konfiguration erfolgen:

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

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

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

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

});
3
Shayan Sulehri

Hier können Sie das sDom -Element zu Ihrem Code hinzufügen, die obere Suchleiste ist ausgeblendet. 

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

Wie von @Scott Stafford gesagt, ist sDOM die am besten geeignete Eigenschaft zum Anzeigen, Ausblenden oder Verschieben der Elemente, aus denen sich die DataTables zusammensetzen. Ich denke, dass sDOM jetzt veraltet ist, mit dem eigentlichen Patch ist diese Eigenschaft jetzt dom.

Mit dieser Eigenschaft können Sie einer Klasse oder einer ID auch ein Element zuweisen, sodass Sie den Stil einfacher gestalten können.

Die offizielle Dokumentation finden Sie hier: https://datatables.net/reference/option/dom

Dieses Beispiel würde nur die Tabelle zeigen:

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

Sie können das sDom-Attribut verwenden. Code sieht so aus.

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

Versteckt die Such- und Pager-Box.

1

Sie könnten sie über css ausblenden:

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

Nur eine Erinnerung, die Sie DataTable nicht zweimal für dasselbe <table>-Element initialisieren können.  

Wenn dasselbe Problem auftritt, können Sie searching und paging false festlegen, während Sie DataTable in Ihrem HTML-Code <table> so initialisieren

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

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 dass Sie das allgemeine CSS oder JS ändern müssen.

0
WalterV

Ich habe das gemacht, indem ich der Fußzeile eine ID zugewiesen habe und dann mit css das Styling vorgenommen 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 mit css gestalten:

#FooterHidden{
   display: none;
}

Wie oben erwähnt funktionieren die Wege für mich nicht.

0
newProgramer

Ab DataTables 1.10.5 kann jetzt die Initialisierung definiert werden Optionen, die HTML5-Daten- * Attribute verwenden.

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

Sie können also data-searching="false" data-paging="false" data-info="false" in der table angeben. 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>

Siehe ein Funktionsbeispiel unter https://jsfiddle.net/jhfrench/17v94f2s/ .

Der Vorteil dieses Ansatzes besteht darin, dass Sie einen standardmäßigen dataTables-Aufruf (dh $('table.apply_dataTables').DataTable()) verwenden können, während Sie die dataTables-Optionen Tabelle für Tabelle konfigurieren können.

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