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”。

Pagination layout

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

我需要一个新的布局，如下所示：

New pagination layout

其中：

“＆gt;” 中将在10中分页10

“＆GT;＆gt;” 中将在20中分页20

“|＆gt;” 中最后一页

任何人都可以帮我解决这个问题。

提前谢谢。

致以最诚挚的问候，

蒂亚戈

Answer 1

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

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

添加＆lt;＆lt;和＆gt;＆gt;按钮第一次和每次绘制表格时：

readBytes :: Get a -> Get ByteString
readBytes getter = do safe <- lookAhead getRemainingLazyByteString
                      let info = runGetOrFail getter safe
                      -- n_cB = number of consumed bytes
                      case info of Right (_, n_cB, _) -> getLazyByteString n_cB

如果nessessary禁用：

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

将事件添加到＆lt;＆lt;和＆gt;＆gt;按钮：

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

Answer 2

这是另一个相当hacky的解决方案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(">");    
}

jQuery DataTables自定义分页（|＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆gt;＆gt;＆gt;＆gt; |）

2 个答案: