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

Question

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

I did all my setup by following the setup documents on the 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, not the "full_numbers".

Page layout

Everything works fine, but the problem is that I need to change the layout to fit the client’s standards.

I need a new layout as shown below:

New page layout

Where:

">" will be paginated 10 in 10

"→" will be paginated 20 to 20

"|>" last page

Anyone could give me a hand on this.

Thanks in advance.

Yours faithfully,

Thiago

Answer 1

, :

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

< → , :

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

, :

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

< → :

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

Answer 2

jsFiddle, , / < > , draw.dt, .

, setCustomPagingSigns:

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