如何更改制表符分页按钮的文本和位置

Question

问题的第一部分是我想简单地更改原始按钮"首先"上一个"；依此类推到其他一些文本。这里有一个显示原始btn的链接。问题的第二部分是如何在表外的页脚中显示页码例如：

<table></table>
<div class:"footer">
pagination
</div>

Answer 1

有几个选项可以用来更改分页设置

按钮文本

如果您希望更改文本，则本地化系统允许您更改表格任何部分的任何文本。有关详细信息，请参阅本地化文档

var table = new Tabulator("#example-table", {
locale:"en-gb",
langs:{
"en-gb":{
"pagination":{
"page_size":"Page Size", //label for the page size select element
"first":"First", //text for the first page button
"first_title":"First Page", //tooltip text for the first page button
"last":"Last",
"last_title":"Last Page",
"prev":"Prev",
"prev_title":"Prev Page",
"next":"Next",
"next_title":"Next Page",
},
}
},
});

按钮位置

如果您只是想更改页脚中分页元素的位置，可以使用CSS。样式化文档包含用于设置分页元素样式的类的完整列表。

例如，要将元素移动到页脚的左侧，您需要使用以下CSS：

.tabulator .table-footer{
text-align:left;
}

外部页脚元素

如果希望Tabulator将分页元素放入表外的元素中，则只需要将该元素的查询选择器传递到表构造函数中的footerElement属性中。页脚布局文档包含这方面的全部详细信息。

在下面的例子中，我假设表外有一个id为"的元素；我的页脚"；您希望元素显示在：中

var table = new Tabulator("#example-table", {
footerElement:"#my-footer",
});

Answer 2

这是问题的第一部分：

$(".tabulator-paginator").find($(".tabulator-page[title='Next Page']")).text('>');
$(".tabulator-paginator").find($(".tabulator-page[title='Last Page']")).text('>>');
$(".tabulator-paginator").find($(".tabulator-page[title='First Page']")).text('<');
$(".tabulator-paginator").find($(".tabulator-page[title='Prev Page']")).text('<<');

至于第二部分，制表师必须将页脚保留在表中，以便其javascript(进行分页的javascript(工作。希望在未来的更新中，它能让我们做到这一点，因为它将提供更多的自定义css的能力。