Wyświetl długość strony u dołu tabeli

Question

Wszystko,

Używam tabel danych Jquery. Używam następujący przykład:

DataTables with Pagination

Zastanawiałem się, czy istnieje sposób, aby wyświetlić „Pokaż 10 wpisów” na dole zamiast górze. Powinien być wyświetlony tuż przed "Wyświetlono od 1 do 10 z 51 wpisów" u dołu tabeli.

Jak mogę to zrobić?

Dzięki

Answer 1

Sposobem na to jest, aby zmienić sdom w js, gdzie można zdefiniować tabelę:

$('#TABLE_ID').dataTable({` 
    "sDom": 'Rfrtlip'`  
}); 

Dodatkowo należy zmienić .css pojawiać się obok „Pokazuj ... wpisy ", ponieważ w ten sposób pojawia się nad nim.

To wyjaśnienie opcji sdom:

następujące opcje są dozwolone: ​​

• 'l' - długość zmienia
• 'F' - filtrowanie wejścia
• "t" - Stół!
• 'i' -Informacje
• 'p' - Stronicowanie
• 'r' - przetwarzanie

Następujące stałe zablokowane:

• 'H' - „motyw jQueryUI nagłówek "classes (" fg-toolbar "-i-widget-nagłówek" "ui-corner-tl ui-corner-tr-u-helper-clearfix")
• "F" - klasy "stopki" motywu jQueryUI ("fg-toolbar" - widget -header ui-corner-bl ui-corner-br ui-hel Per-clearfix ')

oczekuje następującą składnię:

• ' < 'i '>' - elementy div
• ' < "klasa" i '>' - div z klasą
• '< "ID" i '>' - div z id an Przykłady:
• ' < "wrapper" flipt>” 'ip>'

PS: Może to również pomóc:

datatables sDom

add-datatables-length-at-the-bottom-of-the-table

Answer 2

miał podobny problem (chcieli usunąć niepotrzebne kontrole) i jedynym sposobem radzenia sobie z nim wydaje się być tabela modyfikowania siebie. Użyłem wywołania zwrotnego fnDrawCallback (http://datatables.net/usage/callbacks).

To będzie coś takiego w Twoim przypadku

$('#tableId').dataTable({ 
    "fnDrawCallback": function() { 
     $('#tableId_info').prepend($('#tableId_length')); 
    } 
}); 

Wystarczy sprawdzić wygenerowany kod w tym demie, to naprawdę bardzo proste (oprócz tego, że nie ma formatowania lub wcięcia).

Możesz także użyć nazw klas zamiast identyfikatorów, jeśli nie boisz się wpływać na inne tabele na stronie. Są w postaci dataTables_length.

Użyj css, aby uzyskać dodatkową stylizację.

Answer 3

Oto przykład. Dokumentacja ta bardzo pomaga: https://datatables.net/release-datatables/examples/basic_init/dom.html

Moja tabela danych wygląda następująco:

miałem też dodać w css tej linii:

.dataTables_length { 
    margin-top: 10px; 
    margin-left: 20px; 
} 

Kod jest:

$('.data_table').DataTable({ 
      "iDisplayLength": 20, 
      "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], 
      "pagingType": "simple_numbers", 
      "language": { 
       searchPlaceholder: "Search", 
       search: "", 

      }, 
      "dom": '<"top"f>rt<"bottom"ilp><"clear">' 
     });