JQuery DataTables eklentisi tarafından eklenen arama çubuğunu ve altbilgiyi nasıl kaldırabilirim?

JQuery DataTables kullanıyorum .

Varsayılan olarak tabloya eklenen arama çubuğunu ve altbilgiyi (görünürde kaç satır olduğunu gösteren) kaldırmak istiyorum. Bu eklentiyi sıralamak için kullanmak istiyorum. Bu yapılabilir mi?

İçin DataTable> = 1.10 , kullanım:

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

İçin DataTable <1.10 , kullanım:

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

veya saf CSS kullanarak:

.dataTables_filter, .dataTables_info { display: none; }

Check out http://www.datatables.net/examples/basic_init/filter_only.html göstermek / gizlemek için özellik listesi için.

İstediğiniz "bFilter" ve "bInfo" yu false olarak ayarlamaktır;

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

Ayrıca üstbilgi veya altbilgiyi ayarlayarak çizemezsinizsDom : http://datatables.net/usage/options#sDom

'sDom': 't' 

SADECE tabloyu görüntüler, üstbilgi, altbilgi veya herhangi bir şey göstermez.

Burada biraz tartışıldı: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Özel filtre kullanıyorsanız, arama kutusunu gizlemek isteyebilirsiniz, ancak yine de filtre işlevini etkinleştirmek isteyebilirsiniz, bu bFilter: falseşekilde değildir. dom: 'lrtp'Bunun yerine kullan , varsayılan değer 'lfrtip'. Belgeler: https://datatables.net/reference/option/dom

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

Hızlı ve kirli bir yol, altbilginin sınıfını bulmak ve jQuery veya CSS kullanarak gizlemek:

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

themeroller kullanıyorsanız:

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

@Scott Stafford tarafından söylendiği gibi sDOMDataTable'ları oluşturan öğeleri göstermek, gizlemek veya yerini değiştirmek için en uygun özelliktir. Sanırım sDOMşimdi eski, gerçek yama ile bu özellik şimdi dom.

Bu özellik, bir öğeye de bir sınıf veya kimlik ayarlamanıza izin verir, böylece şık daha kolay yapabilirsiniz.

Resmi belgeleri buradan kontrol edin: https://datatables.net/reference/option/dom

Bu örnek yalnızca tabloyu gösterir:

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

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

datatable kurucunuzda

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

Burada sDomöğenize kodunuza ekleyebilirsiniz , üst arama çubuğu gizlidir.

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

Bu sadece konfigürasyon değiştirilerek yapılabilir:

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

Ancak boş altbilgiyi gizlemek için; bu kod parçası hile yapar:

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

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

});

DataTableAynı <table>öğeyi iki kez başlatamayacağınız bir hatırlatma .

Eğer aynı sorunu yaşıyorsanız o zaman ayarlayabilirsiniz searchingve pagingHTML'inize üzerinde DataTable başlatılırken yanlış <table>böyle

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

Onları css ile gizleyebilirsiniz:

#example_info, #example_filter{display: none}

SDom özniteliğini kullanabilirsiniz. Kod böyle bir şeye benziyor.

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

Arama ve çağrı kutusunu gizler.

DataTables 1.10.5'ten itibaren HTML5 data- * özniteliklerini kullanarak başlatma seçeneklerini tanımlamak artık mümkün.

- dataTables belgeleri: HTML5 data- * özellikleri - tablo seçenekleri

Böylece data-searching="false" data-paging="false" data-info="false"üzerinde belirtebilirsiniz table. Örneğin, bu tablo aramaya izin vermez, sayfalama uygulamaz veya bilgi bloğunu göstermez:

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

Https://jsfiddle.net/jhfrench/17v94f2s/ adresinde çalışan bir örneğe bakın .

Bu yaklaşımın avantajı $('table.apply_dataTables').DataTable(), dataTable seçeneklerini tablo olarak yapılandırabilirken standart bir dataTables çağrısına (yani ) sahip olmanıza izin vermesidir .

Ben altbilgi bir kimlik atayarak ve sonra css kullanarak stil yaparak bunu yaptım:

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

sonra css kullanarak şekillendirme:

#FooterHidden{
   display: none;
}

Yukarıda belirtildiği gibi benim için çalışmıyor.

Bence en basit yol:

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

Ortak CSS veya JS'yi değiştirmeden yalnızca değiştirmeniz gereken tabloyu düzenleyebilirsiniz.

Yalnızca arama formunu gizlemek istiyorsanız, örneğin sütun giriş filtreleriniz olduğundan veya zaten tablodan sonuç döndürebilen bir CMS arama formunuz olduğundan, yapmanız gereken tek şey formu incelemek ve kimliğini almaktır. (bunu yazarken, böyle görünür [tableid]-table_filter.dataTables_filter). Daha sonra veri [tableid]-table_filter.dataTables_filter{display:none;}tablolarının diğer tüm özelliklerini saklayın.