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

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

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

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

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

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

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

<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

wenn Sie den Roller verwenden:

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

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'

});

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

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

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.

Sie könnten sie über css ausblenden:

#example_info, #example_filter{display: none}

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

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.

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.

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.

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