Отображение длины страницы внизу таблицы - PullRequest
Новая
       6

Отображение длины страницы внизу таблицы

5 голосов
/ 27 июня 2010

All

Я использую таблицы данных Jquery. Я использую следующий пример:

Таблицы данных с нумерацией страниц

Мне было интересно, есть ли способ отобразить «Показать 10 записей» внизу, а не сверху. Он должен отображаться прямо перед «Показано от 1 до 10 из 51 записей» .. внизу таблицы.

Как я могу это сделать?

Спасибо

Ответы [ 3 ]

12 голосов
/ 13 октября 2014

Способ сделать это - изменить sDom в .js, где вы определяете таблицу: 

$('#TABLE_ID').dataTable({`
    "sDom": 'Rfrtlip'`    
 });

Кроме того, вы должны изменить .css, чтобы он отображался рядом с надписью «Показаны ... записи», поскольку таким образом он отображается над ним.

Это объяснение опций sDom:

Допустимы следующие опции:

  • 'l' - изменение длины
  • 'f' - фильтрация ввода
  • 't' - Стол!
  • 'i' -Информация
  • 'p' - нумерация страниц
  • 'r' - pRocessing

Допустимы следующие константы:

  • 'H' - классы "header" темы jQueryUI ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
  • 'F' - классы нижнего колонтитула темы jQueryUI ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')

Ожидается следующий синтаксис:

  • '<' и '>' - элементы div
  • '<"class" и'> '- div с классом
  • '<"# id" и'> '- div с идентификатором Примеры:
  • '<"Обертка" flipt>' 'ip>'

PS: Это также может помочь вам:

datatables sDom

адд-DataTables-длины по-снизу из-за стола

3 голосов
/ 27 июня 2010

Была похожая проблема (хотел удалить некоторые ненужные элементы управления), и единственный способ справиться с ней, кажется, модифицировать таблицу самостоятельно. Я использовал обратный вызов fnDrawCallback (http://datatables.net/usage/callbacks).

Это будет что-то подобное в вашем случае 

$('#tableId').dataTable({
    "fnDrawCallback": function () {
        $('#tableId_info').prepend($('#tableId_length'));
    }
});

Просто проверьте сгенерированный код в этой демонстрации, это действительно довольно просто (за исключением того, что у него нет форматирования или отступа).

Вы также можете использовать имена классов вместо идентификаторов, если вы не боитесь влиять на другие таблицы на странице. Они в форме dataTables_length.

Используйте CSS для дополнительного стиля.

2 голосов
/ 06 мая 2016

Вот пример. Эта документация очень помогает: https://datatables.net/release-datatables/examples/basic_init/dom.html

Моя таблица данных выглядит так:

enter image description here

Я также должен был добавить в CSS эту строку: 

.dataTables_length {
    margin-top: 10px;
    margin-left: 20px;
}

Код: 

  $('.data_table').DataTable({
            "iDisplayLength": 20,
            "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
            "pagingType": "simple_numbers",
            "language": {
                searchPlaceholder: "Search",
                search: "",

            },
            "dom": '<"top"f>rt<"bottom"ilp><"clear">'
        });
...