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

252

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

leora
źródło
Możesz efektywnie używać, sDomjak opisano tutaj - stackoverflow.com/a/53885264/5729813
Tushar Walzade

Odpowiedzi:

486

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; }
antpaw
źródło
7
Choć komentarz @antpaw jest dobry i wydaje się, że działa w większości przypadków, nie działa, jeśli dla każdej kolumny działa filtrowanie, jak w tym przykładzie: datatables.net/release-datatables/extras/FixedColumns/… . Być świadomym!
Janis Peisenieks
@JanisPeisenieks Przykładowy adres URL jest uszkodzony: datatables.net/extensions/fixedcolumns
antpaw
7
Nie rozumiem, dlaczego jest to akceptowane, ponieważ nie odpowiada na pytanie. Problem polegał na usunięciu paska wyszukiwania i stopki, a nie całkowitym wyłączeniu wyszukiwania.
user1563544
aby całkowicie usunąć stopkę, musisz ustawić paging:falsei info:falsenie tylkopaging:false
Mike D3ViD Tyson
1
dodając do komentarza @ user1563544, czy jest jakiś sposób, aby ukryć pasek wyszukiwania i NIE wyłączać tej funkcji? (inne niż sztuczki CSS?)
vignz.pie
88

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
                 } );
} );
Eric
źródło
@Eric, dziękuję, że działa dla mnie, ale chcę pokazać tylko „bPaginate”, ale nie chcę pokazywać „binfo”, w jaki sposób mogę zaimplementować, jeśli wykonałem „bInfo” = false i „bPaginate” = true, a następnie oba są wyświetlane
amit
W najnowszej wersji DataTables jest po prostu{paging: false, info: false}
josemmo
42

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

Scott Stafford
źródło
2
Należy to dodać do odpowiedzi antpaw. Wpływa to skutecznie na ukrywanie div i symboli zastępczych informacji podczas przekazywania „bFilter”: false, „bInfo”: false.
tibc-dev
To usuwa paginację w stopce. Nie sądzę, że to dobra praktyka.
Anirudh
1
Teraz nazywa się to „dom” i dzięki tej opcji możesz kontrolować znacznie więcej. Zobacz datatables.net/reference/option/dom
unkreativ
1
To właściwie poprawna odpowiedź. Inne odpowiedzi dotyczące poprawek css i js to hacki. Jeśli chcesz prawidłowo używać DataTables, tak to robisz. Na przykład, jeśli chcesz pokazać wszystkie bity i fragmenty (stronicowanie, długość strony itp.) domltipr
Oprócz
26

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

sulaiman sudirman
źródło
10
var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});
Pietro La Grotta
źródło
7

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

$(".dataTables_info").hide();
kgiannakakis
źródło
4

jeśli używasz themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }
paja01
źródło
+1 Dzięki, wskazało mi to właściwy kierunek. Nie chciałem też ukrywać nagłówka, więc chciałem tylko stopkę. Klasy ui-corner-bl i ui-corner-br są stosowane tylko do stopki, więc użyłem jednej z nich, aby uzyskać opakowanie stopki ........ $ (". ui-corner-bl"). hide ( );
Kevbo
4

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'
});
Grirg
źródło
3

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

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

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'

});
Shayan Sulehri
źródło
2

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'
    ]
 });
Hitesh Sahu
źródło
1

Możesz je ukryć za pomocą css:

#example_info, #example_filter{display: none}
graficzny
źródło
Nie „źle”, tylko inaczej. Zależy to od tego, czy chcesz ukryć wszystkie instancje (według klasy, jak w odpowiedzi), czy konkretną instancję (według identyfikatora, jak w mojej).
graphicdivine,
1

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.

Justget Meinside
źródło
1

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.

Jeromy French
źródło
0

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.

newProgramer
źródło
0

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.

WalterV
źródło
0

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.

Herbert Kimani
źródło