Display-Seitenlänge an der Unterseite des Tisches

Question

Alle,

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

Tables mit Paginierung

Ich frage mich, ob es einen Weg gibt „Zeige 10 Einträge“ auf der Unterseite des oberen statt angezeigt werden soll. Es sollte direkt vor „Zeige 1 bis 10 von 51 Einträge“ angezeigt werden .. am Ende der Tabelle.

Wie kann ich das tun?

Danke

Answer 1

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

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

Darüber hinaus sollten Sie die CSS ändern neben den „Zeige ... Einträge“, erscheinen, weil diese Art und Weise es darüber erscheinen.

Dies ist die Erklärung der sDom Optionen:

  

Die folgenden Optionen sind möglich:

• 'l' - Länge zu ändern
• 'f' - Filtering Eingang
• 't' - Die Tabelle
• 'i' -Information
• 'p' - Paginierung
• 'r' - beitung

Die folgenden Konstanten sind erlaubt:

• 'H' - jQueryUI Thema "header" Klassen ( 'fg-Symbolleiste ui-Widget-Header ui-Ecke-tl ui-Ecke-tr ui-Helfer-clearfix')
• 'F' - jQueryUI Thema "Footer" Klassen ( 'fg-Symbolleiste ui-Widget-Header ui-Ecke-bl ui-Ecke-br ui-Helfer-clearfix')

Die folgende Syntax wird erwartet:

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

PS: Dies könnte Ihnen auch helfen:

Datentabellen sDom

Add-datatables- Länge-at-the-bottom-of-the-table

Answer 2

Wir hatten ein ähnliches Problem (wollte einige unnötige Kontrollen entfernen) und der einzige Weg, um mit ihm Tisch zu sein scheint, sich zu ändern. Ich benutzte fnDrawCallback Rückruf ( http://datatables.net/usage/callbacks ).

Es wird so etwas wie dies in Ihrem Fall sein

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

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

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

Verwenden Sie CSS für zusätzliches Styling.

Answer 3

Hier ist ein Beispiel. Diese Dokumentation hilft viel: https://datatables.net/release-datatables/ Beispiele / basic_init / dom.html

Meine Datentabelle sieht wie folgt aus:

Ich habe auch in CSS diese Zeile hinzufügen:

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

Der Code lautet:

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