jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery DataTables自定义分页(| << << <> >>> |)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想请求您关于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”.

Pagination layout

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

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

New pagination layout

哪里:

“>” 中将10分10分

“>>” 中20分20分

“|>” 中最后一页

任何人都可以帮我一把.

先感谢您.

最好的祝福,

蒂亚戈

解决方法

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

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

大佬总结

以上是大佬教程为你收集整理的jQuery DataTables自定义分页(| << << <> >>> |)全部内容,希望文章能够帮你解决jQuery DataTables自定义分页(| << << <> >>> |)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。