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

Je voudrais vous demander votre aide concernant les tables de données du plugin.

J'ai fait tout mon installation suivant la configuration de documents sur les tables de données du site web, 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é le "plein" et des options à la place "full_numbers".

Mise en page de la Pagination

C'est que tout fonctionne bien, mais le problème est que j'ai besoin de changer la mise en page de bien suivre le client.

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

Nouvelle mise en page de la pagination

Où:

">" va paginer de 10 en 10

">>" va paginer 20 en 20

"|>" la dernière page

Quelqu'un pouvait me donner un coup de main sur.

Vous en remercie d'avance.

Cordialement,

Thiago

OriginalL'auteur Thiago Gracioso | 2016-11-12

  1. 7

    Vous pourriez avoir à le faire manuellement comme ceci:

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

    ajouter << et >> Boutons de la première fois et à chaque fois que la table est tracée:

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

    désactiver si nessessary:

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

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

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

    OriginalL'auteur Tom Glover

  2. 1

    Voici un autre plutôt hacky solution jsFiddle, mais si vous êtes à la recherche pour un coup rapide, le code suivant va changer les boutons précédent/suivant pour < et >pour toutes les tables de données, il suffit de changer le sélecteur de draw.dt cas, si vous souhaitez cibler une table spécifique.

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

    Différents datatable types ont des façons différentes de rendu, j'ai créé un trois différents setCustomPagingSigns fonctions pour certains d'entre eux:

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

    OriginalL'auteur Legends