wake-up-neo.com

benutzerdefinierte Paginierung von jQuery DataTables (| <<< <> >>> |)

Ich möchte Sie um Ihre Hilfe bezüglich des DataTables-Plugins bitten.

Ich habe mein gesamtes Setup anhand der Setup-Dokumente auf der Datatables-Website wie folgt durchgeführt:

    $("#DataTableNuse").DataTable(
{        
    ordering: true,
    bLengthChange: false,
    iDisplayLength: 10,
    bFilter: false,
    pagingType: "full_numbers",
    bInfo: false,
    dom: "Bfrtip",
    buttons:
    [
        { extend: 'pdf', text: 'Exportar PDF', title: 'Nuse' },
        { extend: 'Excel', text: 'Exportar Excel', title: 'Nuse' }
    ],
    language:
    {
        emptyTable: "<li class='text-danger' align='center'>NUSE não encontrada</li>",
        paginate:
        {
            previous: "<",
            next: ">",
            first: "|<",
            last: ">|"
        }
    }    
});

Auch die "full" -Optionen statt "full_numbers" ausprobiert.

Seitenaufteilung

Es funktioniert alles gut, aber das Problem ist, dass ich das Layout ändern muss, um den Kundenstandards zu entsprechen.

Ich brauche ein neues Layout wie folgt:

Neues Paginierungslayout

Woher:

">" wird 10 in 10 paginieren

">>" wird 20 in 20 paginieren

"|>" letzte Seite

Jeder konnte mir dabei helfen. 

Danke im Voraus.

Freundliche Grüße,

Thiago

jquerypaginationdatatablescustomization
4
Thiago Gracioso

Möglicherweise müssen Sie dies manuell tun:

https://jsfiddle.net/7ramuk9c/1/

fügen Sie die Schaltflächen << und >> zum ersten Mal und jedes Mal, wenn die Tabelle gezeichnet wird, hinzu:

addExtraButtons();
$('#example').on("draw.dt", function(e) {
    addExtraButtons();
})

deaktivieren, wenn nötig:

 if (currentPage.page == 0) {
     $(".quick_previous").addClass("disabled")
 }

hinzufügen von Ereignissen zu den Schaltflächen << und >>:

function quickPrevious(e) {
   var pageToGoTo = (currentPage.page - 2) <= 0 ? 0 : (currentPage.page - 2);
   table.page(pageToGoTo).draw(false);
}
6
Tom Glover

Hier ist eine weitere etwas hacklige Lösung jsFiddle , aber wenn Sie nach einer schnellen Aufnahme suchen, ändert der folgende Code die vorherige/nächste Schaltfläche in < und >für alle Datentypen. Ändern Sie einfach den Selektor für das draw.dt-Ereignis, falls vorhanden Sie möchten nur eine bestimmte Tabelle als Ziel haben.

 enter image description here

Verschiedene datierbare Datentypen haben unterschiedliche Darstellungsarten. Ich habe für einige von ihnen eine drei verschiedenesetCustomPagingSigns-Funktionen erstellt:

$(".dataTable").on("draw.dt", function (e) {                    
    setCustomPagingSigns.call($(this));
}).each(function () {
    setCustomPagingSigns.call($(this)); // initialize
});

// this should work with standard datatables styling - li.previous/li.next
function setCustomPagingSigns() {
    var wrapper = this.parent();
    wrapper.find("li.previous > a").text("<");
    wrapper.find("li.next > a").text(">");          
}

//  - a.previous/a.next
function setCustomPagingSigns() {
    var wrapper = this.parent();
    wrapper.find("a.previous").text("<");
    wrapper.find("a.next").text(">");           
}

// this one works with complex headers example, bootstrap style
function setCustomPagingSigns() {
    var wrap = this.closest(".dataTables_wrapper");
    var lastrow= wrap.find("div.row:nth-child(3)");
    lastrow.find("li.previous>a").text("<");
    lastrow.find("li.next>a").text(">");    
}
1
Legends