jQuery DataTables custom pagination (|< << < > >> >|)

Question

I would like to ask for your help regarding DataTables plugin.

I did all my setup following the setup documents on datatables website, like below:

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

Also tried the "full" options as well instead "full_numbers".

Pagination layout

It is everything working fine, but the problem is that I need to change the layout to properly follow the customer's standards.

I need a new layout like below:

New pagination layout

Where:

">" will paginate 10 in 10

">>" will paginate 20 in 20

"|>" last page

Anyone could give me a hand on that.

Thank you in advance.

Best regards,

Thiago

Answer 1

You might have to do it manually like this:

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

add << and >> Buttons first time and everytime the table is drawn:

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

disable if nessessary:

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

add events to << and >> buttons:

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

Answer 2

Here is another rather hacky solution jsFiddle, but if you're looking for a quick shot, the following code will change the previous/next button to < and >for all datatables, just change the selector for the draw.dt event, if you want to target a specific table only.

Different datatable types have different ways of rendering, I have created a three different setCustomPagingSigns functions for some of them:

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