jQuery DataTables自定义分页(| << << <> >>> |)

Question

我想请求您关于DataTables插件的帮助.

我按照datatables网站上的安装文档完成了所有设置,如下所示:

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

还尝试了"完整"选项,而不是"full_numbers".

分页布局

一切正常,但问题是我需要更改布局以正确遵循客户的标准.

我需要一个新的布局,如下所示:

新的分页布局

哪里:

">"将10分10分

">>"将20分20分

"|>"最后一页

任何人都可以帮我一把.

先感谢您.

最好的祝福,

蒂亚戈

Answer 1

你可能需要像这样手动完成:

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

首次添加<<和>>按钮,每次绘制表格时:

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

禁用,如果nessessary:

 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);
}