Как изменить текст и положение кнопок табулятора - PullRequest
Новая
       9

Как изменить текст и положение кнопок табулятора

0 голосов
/ 27 апреля 2020

Первая часть вопроса: я хочу просто изменить оригинальные кнопки «Первая», «Предыдущая» и т. Д. На какой-нибудь другой текст. Вот ссылка , которая показывает исходные биты. Моя вторая часть вопроса - как я могу отобразить нумерацию страниц в нижнем колонтитуле, например: 

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

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Есть несколько опций, которые вы можете использовать для изменения настроек нумерации страниц

Текст кнопки

Если вы хотите изменить текст, то система локализации позволяет вам изменить любой текст для любого часть таблицы, для полной информации см. Документация по локализации 

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 в конструкторе таблицы. Документация макета нижнего колонтитула содержит полную информацию по этому вопросу.

В приведенном ниже примере я предполагаю, что у вас есть элемент вне таблицы с идентификатором "my-footer", который вам нужен для элементов появляться в: 

var table = new Tabulator("#example-table", {
    footerElement:"#my-footer",
});
0 голосов
/ 29 апреля 2020

Вот первая часть вопроса: 

 $(".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 (тот, который выполняет разбиение на страницы) , Надеемся, что в будущих обновлениях это позволит нам сделать это, поскольку даст больше возможностей для настройки css.

...