web-dev-qa-db-fra.com

pagination personnalisée jQuery DataTables (| <<<< <> >>> |)

Je voudrais demander votre aide concernant le plugin DataTables.

J'ai fait toute ma configuration en suivant les documents de configuration sur le site Web de datatables, comme ci-dessous:

    $("#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: ">|"
        }
    }    
});

Aussi essayé les options "complet" ainsi que "full_numbers".

Mise en page

Tout fonctionne bien, mais le problème est que je dois modifier la mise en page pour bien respecter les normes du client.

J'ai besoin d'une nouvelle mise en page comme ci-dessous:

Nouvelle mise en page

Où:

">" va paginer 10 sur 10

">>" paginera 20 sur 20

"|>" dernière page

Tout le monde peut me donner un coup de main à ce sujet. 

Merci d'avance.

Meilleures salutations,

Thiago

jquerypaginationdatatablescustomization
4
Thiago Gracioso

Vous devrez peut-être le faire manuellement comme ceci:

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

ajoute les boutons << et >> pour la première fois et à chaque fois que le tableau est dessiné:

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

désactiver si nécessaire:

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

ajouter des événements aux boutons << et >>:

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

Voici une autre solution plutôt compliquée jsFiddle , mais si vous recherchez une solution rapide, le code suivant changera le bouton précédent/suivant en < et > pour toutes les données, modifiez simplement le sélecteur pour l'événement draw.dt, si vous voulez cibler une table spécifique uniquement.

 enter image description here

Différents types de données ont différentes façons de rendre, j'ai créé une trois fonctions différentes setCustomPagingSigns pour certaines d'entre elles:

$(".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