изменить текст на угловые цифровые кнопки разбиения на страницы

Мое приложение использует угловые datatables. Разбиение состоит изизменить текст на угловые цифровые кнопки разбиения на страницы

[Первая] [Предыдущая] [1] [Следующая] [Последняя]

Я хотел бы изменить это на более короткие строки, такие как

| < < 1>> |

Я уверен, что это возможно, но я не могу найти ссылки на него в документах.

Это, в других местах, где я искал:

http://l-lin.github.io/angular-datatables/#/changeOptions https://datatables.net/examples/basic_init/alt_pagination.html

Вот фрагмент из HTML и контроллера:

<table class="table table-sortable table-hover table-checkable order-column" 
    id="package-table" 
    datatable="ng" 
    dt-options="manifestVm.dtPackageOptions" 
    dt-column-defs="manifestVm.dtPackageColumnDefs"> 



vm.dtPackageOptions = DTOptionsBuilder.newOptions() 
    .withPaginationType('full_numbers') 
    .withDisplayLength(10) 
    .withBootstrap(); 

vm.dtPackageColumnDefs = [ 
    DTColumnDefBuilder.newColumnDef(0), 
    DTColumnDefBuilder.newColumnDef(1), 
    DTColumnDefBuilder.newColumnDef(2) 
];

источник

2016-07-12 DaveC426913

Существует апи для это: DTOptions> withLanguage (oLanguage)

вы можете проверить это here. Перейдите на вкладку DTOptionsBuilder и выполните поиск по языку (oLanguage), а затем oPaginate.

источник

2016-07-12 18:57:24

Я видел это, но не установил соединение. Кажется, это своего рода мутный способ сделать что-то довольно распространенное. – DaveC426913

Я думаю, вам не нужно предоставлять все. просто укажите поле «oPaginate». –

Как реализовать эти параметры в угловом режиме, а не в режиме jQuery? – DaveC426913

Я думаю, что вы можете редактировать language settings.

объект Язык по умолчанию выглядит следующим образом:

{ 
"decimal":  "", 
"emptyTable":  "No data available in table", 
"info":   "Showing _START_ to _END_ of _TOTAL_ entries", 
"infoEmpty":  "Showing 0 to 0 of 0 entries", 
"infoFiltered": "(filtered from _MAX_ total entries)", 
"infoPostFix": "", 
"thousands":  ",", 
"lengthMenu":  "Show _MENU_ entries", 
"loadingRecords": "Loading...", 
"processing":  "Processing...", 
"search":   "Search:", 
"zeroRecords": "No matching records found", 
"paginate": { 
    "first":  "First", 
    "last":  "Last", 
    "next":  "Next", 
    "previous": "Previous" 
}, 
"aria": { 
    "sortAscending": ": activate to sort column ascending", 
    "sortDescending": ": activate to sort column descending" 
} 
}

Так, чтобы добавить стиль вы хотите, изменить его на:

{ 
"decimal":  "", 
"emptyTable":  "No data available in table", 
"info":   "Showing _START_ to _END_ of _TOTAL_ entries", 
"infoEmpty":  "Showing 0 to 0 of 0 entries", 
"infoFiltered": "(filtered from _MAX_ total entries)", 
"infoPostFix": "", 
"thousands":  ",", 
"lengthMenu":  "Show _MENU_ entries", 
"loadingRecords": "Loading...", 
"processing":  "Processing...", 
"search":   "Search:", 
"zeroRecords": "No matching records found", 
"paginate": { 
    "first":  "<<", 
    "last":  ">>", 
    "next":  ">", 
    "previous": "<" 
}, 
"aria": { 
    "sortAscending": ": activate to sort column ascending", 
    "sortDescending": ": activate to sort column descending" 
    } 
}

Вы связанный с: language.paginate.first, language.paginate.last, language.paginate.next и language.paginate.previous.

Here - пример того, как изменить «первый» при создании данных.

$('#example').dataTable({ 
    "language": { 
    "paginate": { 
     "first": "First page" 
    } 
    } 
});

Here также ссылка на соответствующую Stack Overflow answer, что также говорит о редактировании настроек объекта языка

источник

2016-07-12 19:49:30

Это хороший пример для jQuery, но не применим для угловых данных. –

@ Майкл Уэсткотт. С небольшим исследованием вы можете понять, как использовать это с угловыми datatables. Вот. $ scope.dtOptions = DTOptionsBuilder.newOptions() .withLanguage ({ "info": "Отображение _START_ в _END_ of _TOTAL_", "lengthMenu": "Show _MENU_" }); – Exzile

Поздний ответ. но это может быть полезно для кого-то.

vm.dtPackageOptions = DTOptionsBuilder.newOptions() 
    .withPaginationType('full_numbers') 
    .withDisplayLength(10) 
    .withBootstrap(); 
    .withLanguage({ 
       "processing": "Processing...", 
       "loadingRecords": "Loading...", 
       "paginate": { 
        "first": '<i class="fa fa-fast-backward" aria-hidden="true"></i>', 
        "last": '<i class="fa fa-fast-forward" aria-hidden="true"></i>', 
        "next": '<i class="fa fa-step-forward large" aria-hidden="true"></i>', 
        "previous": '<i class="fa fa-step-backward" aria-hidden="true"></i>' 
       } 
      })

источник

2017-01-11 22:33:58 Kalyan

изменить текст на угловые цифровые кнопки разбиения на страницы

ответ

Смежные вопросы