Jak mogę usunąć pasek wyszukiwania i stopkę dodane przez wtyczkę jQuery DataTables?

Korzystam z jQuery DataTables .

Chcę usunąć pasek wyszukiwania i stopkę (pokazującą liczbę widocznych wierszy), które są domyślnie dodawane do tabeli. Chcę tylko użyć tej wtyczki do sortowania. Czy można to zrobić?

Dla DataTables> = 1.10 użyj:

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

Dla DataTables <1.10 użyj:

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

lub używając czystego CSS:

.dataTables_filter, .dataTables_info { display: none; }

Sprawdź http://www.datatables.net/examples/basic_init/filter_only.html, aby uzyskać listę funkcji do pokazania / ukrywania.

Chcemy ustawić „bFilter” i „bInfo” na false;

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

Nie można w ogóle narysować nagłówka ani stopki, ustawiając sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

wyświetli TYLKO tabelę, żadnych nagłówków, stopek ani niczego.

Omówiono tu niektóre: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Jeśli używasz niestandardowego filtra, możesz chcieć ukryć pole wyszukiwania, ale nadal chcesz włączyć funkcję filtrowania, więc bFilter: falsenie jest to możliwe. dom: 'lrtp'Zamiast tego użyj domyślnie 'lfrtip'. Dokumentacja: https://datatables.net/reference/option/dom

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

Szybkim i brudnym sposobem jest znalezienie klasy stopki i ukrycie jej za pomocą jQuery lub CSS:

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

jeśli używasz themeroller:

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

Jak powiedział @Scott Stafford, sDOMjest to najbardziej odpowiednia właściwość do pokazywania, ukrywania lub przenoszenia elementów składających się na DataTables. Myślę, że sDOMteraz jest przestarzały, z faktyczną łatką ta właściwość jest teraz dom.

Ta właściwość pozwala również ustawić pewną klasę lub identyfikator na element, dzięki czemu możesz stylowo łatwiej.

Sprawdź oficjalną dokumentację tutaj: https://datatables.net/reference/option/dom

W tym przykładzie pokazano tylko tabelę:

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

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

w konstruktorze danych

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

Tutaj możesz dodać sDomelement do kodu, górny pasek wyszukiwania jest ukryty.

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

Można to zrobić po prostu zmieniając konfigurację:

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

Ale żeby ukryć pustą stopkę; ten fragment kodu rozwiązuje problem:

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

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

});

Przypomnienie, że nie możesz zainicjować DataTabletego samego <table>elementu dwa razy.

Jeśli napotkasz ten sam problem, możesz ustawić searchingi ustawić pagingfałsz podczas inicjowania DataTable na swoim HTML w <table>ten sposób

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

Możesz je ukryć za pomocą css:

#example_info, #example_filter{display: none}

Możesz użyć atrybutu sDom. Kod wygląda mniej więcej tak.

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

Ukrywa okno wyszukiwania i pager.

Od DataTables 1.10.5 można teraz zdefiniować opcje inicjalizacji za pomocą atrybutów danych HTML5 data- *.

- dokumentacja dataTables: dane HTML5- * atrybuty - opcje tabeli

Możesz więc określić data-searching="false" data-paging="false" data-info="false"w table. Na przykład ta tabela nie pozwala na wyszukiwanie, stosowanie stronicowania ani pokazywanie bloku informacyjnego:

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

Zobacz działający przykład na https://jsfiddle.net/jhfrench/17v94f2s/ .

Zaletą tego podejścia jest to, że pozwala ono na standardowe wywołanie dataTables (tj. $('table.apply_dataTables').DataTable()), A jednocześnie jest w stanie skonfigurować opcje dataTables tabela po tabeli.

Zrobiłem to, przypisując stopce identyfikator, a następnie stylizując za pomocą 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>

następnie stylizuj za pomocą css:

#FooterHidden{
   display: none;
}

Jak wspomniano powyżej, sposoby nie działają dla mnie.

Myślę, że najprostszym sposobem jest:

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

Możesz edytować tylko tabelę, którą musisz zmodyfikować, bez zmiany wspólnego CSS lub JS.

Jeśli chcesz tylko ukryć formularz wyszukiwania, na przykład dlatego, że masz filtry do wprowadzania danych w kolumnie lub może to być spowodowane tym, że masz już formularz wyszukiwania CMS, który jest w stanie zwrócić wyniki z tabeli, wszystko co musisz zrobić, to sprawdzić formularz i uzyskać jego identyfikator - (w chwili pisania tego wygląda to tak [tableid]-table_filter.dataTables_filter). Następnie po prostu [tableid]-table_filter.dataTables_filter{display:none;}zachowaj wszystkie inne cechy danych.