Bagaimana cara menghapus bilah pencarian dan catatan kaki yang ditambahkan oleh plugin jQuery DataTables?

Saya menggunakan jQuery DataTables .

Saya ingin menghapus bilah pencarian dan catatan kaki (menunjukkan berapa banyak baris yang terlihat) yang ditambahkan ke tabel secara default. Saya hanya ingin menggunakan plugin ini untuk menyortir, pada dasarnya. Bisakah ini dilakukan?

Untuk DataTables> = 1,10 , gunakan:

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

Untuk DataTables <1.10 , gunakan:

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

atau menggunakan CSS murni:

.dataTables_filter, .dataTables_info { display: none; }

Lihat http://www.datatables.net/examples/basic_init/filter_only.html untuk daftar fitur yang ditampilkan / disembunyikan.

Yang Anda inginkan adalah mengatur "bFilter" dan "bInfo" menjadi false;

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

Anda juga tidak bisa menggambar header atau footer sama sekali dengan menetapkan sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

akan menampilkan tabel HANYA saja, tidak ada header atau footer atau apa pun.

Ini dibahas beberapa di sini: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Jika Anda menggunakan filter khusus, Anda mungkin ingin menyembunyikan kotak pencarian tetapi masih ingin mengaktifkan fungsi filter, jadi bFilter: falsebukan itu caranya. Gunakan dom: 'lrtp'sebagai gantinya, standarnya adalah 'lfrtip'. Dokumentasi: https://datatables.net/reference/option/dom

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

Cara cepat dan kotor adalah mencari tahu kelas dari footer dan menyembunyikannya menggunakan jQuery atau CSS:

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

jika Anda menggunakan themeroller:

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

Seperti yang dikatakan oleh @Scott Stafford sDOMadalah properti yang paling tepat untuk menunjukkan, menyembunyikan, atau memindahkan elemen yang menyusun DataTables. Saya pikir sDOMsekarang sudah ketinggalan zaman, dengan tambalan sebenarnya properti ini sekarangdom .

Properti ini memungkinkan untuk menetapkan beberapa kelas atau id ke suatu elemen juga, sehingga Anda dapat bergaya dengan lebih mudah.

Periksa dokumentasi resmi di sini: https://datatables.net/reference/option/dom

Contoh ini hanya akan menampilkan tabel:

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

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

di konstruktor dataat Anda

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

Di sini Anda dapat menambahkan sDomelemen ke kode Anda, bilah pencarian teratas disembunyikan.

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

Ini dapat dilakukan dengan hanya mengubah konfigurasi:

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

Tetapi untuk menyembunyikan catatan kaki yang kosong; kode ini berguna:

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

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

});

Hanya pengingat Anda tidak dapat menginisialisasi DataTablepada <table>elemen yang sama dua kali.

Jika Anda mengalami masalah yang sama maka Anda dapat mengatur searchingdan pagingsalah saat menginisialisasi DataTable pada HTML Anda <table>seperti ini

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

Anda dapat menyembunyikannya melalui css:

#example_info, #example_filter{display: none}

Anda dapat menggunakan atribut sDom. Kode terlihat seperti ini.

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

Itu menyembunyikan kotak pencarian dan pager.

Pada DataTables 1.10.5 sekarang dimungkinkan untuk menentukan opsi inisialisasi menggunakan atribut data- * HTML5.

- dokumentasi dataTables: HTML5 data- * atribut - opsi tabel

Jadi, Anda dapat menentukan data-searching="false" data-paging="false" data-info="false"di table. Misalnya, tabel ini tidak akan mengizinkan pencarian, menerapkan paging, atau menampilkan blok informasi:

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

Lihat contoh yang berfungsi di https://jsfiddle.net/jhfrench/17v94f2s/ .

Keuntungan dari pendekatan ini adalah memungkinkan Anda untuk memiliki panggilan dataTables standar (yaitu, $('table.apply_dataTables').DataTable()) sementara dapat mengkonfigurasi opsi tabel data tabel-demi-tabel.

Saya telah melakukan ini dengan menetapkan footer id dan kemudian menata menggunakan css:

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

lalu styling menggunakan css:

#FooterHidden{
   display: none;
}

Seperti yang disebutkan di atas cara-cara tidak bekerja untuk saya.

Saya pikir cara paling sederhana adalah:

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

Anda dapat mengedit hanya tabel yang harus Anda modifikasi, tanpa mengubah CSS atau JS umum.

Jika Anda hanya ingin menyembunyikan form pencarian misalnya karena Anda memiliki filter input kolom atau mungkin karena Anda sudah memiliki form pencarian CMS yang dapat mengembalikan hasil dari tabel maka yang harus Anda lakukan adalah memeriksa form dan mendapatkan id - (pada saat penulisan ini, terlihat seperti itu [tableid]-table_filter.dataTables_filter). Maka cukup lakukan [tableid]-table_filter.dataTables_filter{display:none;}mempertahankan semua fitur lain dari basis data.