Как выровнять pageLength, кнопки экспорта и панель поиска в семантическом DataTable?

Question

Как выровнять pageLength, кнопки экспорта и панель поиска в семантическом DataTable?

1

Я действительно не так свободно говорю с JS и CSS, поэтому мне трудно узнать, как я мог бы получить представление на изображении ниже для моей таблицы данных:

Я в основном хочу разделить строку на три столбца шириной 4-8-4, чтобы соответствовать длине страницы, кнопкам экспорта и строке поиска.

Я построил DataTable из этого примера. Единственное отличие заключается в том, что я удалил lengthChange: false в javascript. Я пытался играть с опциями dom, но мне не повезло.

Я также нашел решение для той же проблемы из qaru.site/questions/554230/..., но использует bootstrap. Я понятия не имею, как это изменить для semanticui.

Спасибо!

Whooper 06 янв. 2018, в 23:37

Источник

Теги:

javascript

datatables

css

1 ответ

Ещё вопросы

Gyrocode.com · Accepted Answer · 2018-01-07T02-13-00.000Z

Попробуйте использовать следующую опцию dom:

dom:
  "<'ui grid'"+
     "<'row'"+
        "<'four wide column'l>"+
        "<'center aligned eight wide column'B>"+
        "<'right aligned four wide column'f>"+
     ">"+
     "<'row dt-table'"+
        "<'sixteen wide column'tr>"+
     ">"+
     "<'row'"+
        "<'seven wide column'i>"+
        "<'right aligned nine wide column'p>"+
     ">"+
  ">",

В вашем случае НЕ используйте этот код из приведенного примера:

table.buttons().container()
    .appendTo( $('div.eight.column:eq(0)', table.table().container()) );

Это сработало отлично! Спасибо @ Gyrocode.com! Я думаю, что я каким-то образом получаю идею написать собственный дом лучше из вашего решения. Могу ли я просто знать, почему мне нужно было опустить table.buttons().container().appendTo( $('div.eight.column:eq(0)', table.table().container()) ); , Я просто хочу лучше понять, что на самом деле делает, поскольку JS все еще сбивает меня с толку. Спасибо!
Код @Whooper, appendTo() позволяет вставлять HTML для кнопок в существующую структуру и избегать использования сложной структуры с опцией dom . В вашем случае использование опции dom было бы гораздо понятнее, чем изменение содержимого HTML с помощью JavaScript и jQuery.
Я понял теперь. Большое вам спасибо @ Gyrocode.com! :)