Пользовательские нумерации страниц в DataTables js - PullRequest
Новая
       9

Пользовательские нумерации страниц в DataTables js

3 голосов
/ 16 апреля 2020

Как добавить пользовательскую нумерацию страниц в таблицах данных. js согласно рисунку ниже?

the attached image

1 Ответ

3 голосов
/ 16 апреля 2020

Самый быстрый способ добавить нумерацию страниц - это добавить параметр 'paging' к вашим начальным параметрам, например: 

$('#your_table_id').dataTable( {
    "paging": true
});

Параметр 'paging' установлен на true по умолчанию.

Вы также можете добавить параметр pagingType и установить его на full_numbers, например: 

$('#your_table_id').dataTable( {
    "paging": true,
    "pagingType": "full_numbers"
});

Чтобы отобразить другие кнопки нумерации страниц (первая, последняя) и добавить к ним собственные имена, которые следует использовать ниже код: 

$('#myTable').DataTable({
  "pagingType": "full_numbers",
  "language": {
    "paginate": {
      "first":    "«",
      "previous": "‹",
      "next":     "›",
      "last":     "»"
    }
  }
});

и для добавления стиля вы можете переопределить некоторые CSS правила, например: 

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid blue !important;
  /* other rules */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border: 1px solid red !important;
  /* other rules */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  border: 1px solid grey !important;
  /* other rules */
}

К сожалению, это уродливо, потому что вы должны использовать флаг !important.

Другой, более сложный способ - написать собственный плагин.

...