Display-Seitenlänge an der Unterseite des Tisches

Question

Alle,

Ich benutze JQuery Datentabellen. Ich bin mit dem folgenden Beispiel:

DataTables with Pagination

ich mich gefragt, ob es einen Weg gibt „Show 10 Einträge“ auf dem Boden statt oben angezeigt werden soll. Es sollte direkt vor "Zeige 1 bis 10 von 51 Einträgen" am Ende der Tabelle angezeigt werden.

Wie kann ich das tun?

Dank

Answer 1

Die Art und Weise, das zu tun ist, um die sDom in den Js zu ändern, in dem Sie die Tabelle definieren:

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

Darüber hinaus sollten Sie die CSS- auf die „Zeige neben erscheinen ändern ... Einträge ", weil es so über ihm erscheint.

Dies ist die Erklärung der sDom Optionen:

Folgende Optionen sind erlaubt:

• 'l' - Länge ändert
• 'f' - Filtering Eingang
• 't' - Der Tisch!
• 'i' -Information
• 'p' - Paginierung
• 'r' - PROCESSING

Die folgenden Konstanten sind erlaubt:

• 'H' - jQueryUI Thema „header "Klassen" (fg-toolbar ui-widget-header ui-corner-tl ui-corner-tru-helfer-clearfix ')
• ' F '- jQueryUI Thema "footer" -Klassen (' fg-toolbar ui-widget -header Ui-Ecke-Blu-Ecke-Brui-Hel pro-clearfix ')

Die folgende Syntax erwartet:

• ' < 'und '>' - div Elemente
• ' < "Klasse" und '>' - div mit einer Klasse
• '< "#id" und '>' - div mit einer ID-Beispiele:
• ' < "Wrapper" Flipt>‘ 'ip>'

datatables sDom

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

Answer 2

hat ein ähnliches Problem und den einzigen Weg, um mit ihm selbst Tabelle zu modifizieren scheint (einige unnötigen Kontrollen entfernen wollte). Ich habe fnDrawCallback Callback (http://datatables.net/usage/callbacks) verwendet.

Es wird so etwas wie dies in Ihrem Fall

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

einfach überprüfen Sie den erzeugten Code in dieser Demo sein, es ist wirklich ganz einfach ist (außer es keine Formatierung oder Vertiefung hat).

Sie können auch Klassennamen anstelle von IDs verwenden, wenn Sie keine Angst haben, andere Tabellen auf der Seite zu beeinflussen. Sie sind in der Form dataTables_length.

Verwenden Sie CSS für zusätzliches Styling.

Answer 3

Hier ist ein Beispiel

:

PS: Dies könnte Ihnen auch helfen. Diese Dokumentation hilft viel: https://datatables.net/release-datatables/examples/basic_init/dom.html

Meine Datentabelle sieht wie folgt aus:

Ich musste auch diese Zeile in CSS hinzufügen:

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

Der Code ist:

$('.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">' 
     });