JQuery Datatables перекрываются при использовании фильтрации столбцов - PullRequest
Новая
       21

JQuery Datatables перекрываются при использовании фильтрации столбцов

0 голосов
/ 25 января 2019

У меня есть Jquery Datatable внутри начальной загрузки. Строка Bootstrap разделена между таблицей Datatable и диаграммой Chartjs.

При инициализации DataTable без каких-либо параметров макет поддерживается в хорошем состоянии без каких-либо перекрытий. Но когда я добавил следующий код для добавления опции фильтрации столбцов, макет не работает. 

$('#example').DataTable( {
 initComplete: function () {
   this.api().columns().every( function () {
    var column = this;
    var select = $('<select><option value=""></option></select>')
    .appendTo( $(column.footer()).empty() )
    .on( 'change', function () {
     var val = $.fn.dataTable.util.escapeRegex(
      $(this).val()
     );
column
  .search( val ? '^'+val+'$' : '', true, false )
  .draw();
  } );
column.data().unique().sort().each( function ( d, j ) {
  select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );

Я заметил, что самый низкий код - тот, который вызывает проблемы. Как мне это исправить?

JSFiddle для кода

1 Ответ

0 голосов
/ 25 января 2019

Ваша таблица шире, чем столбец Bootstrap, который она занимает, и она переполняется в столбце графика.

Вы можете либо

  1. сделать таблицу отзывчивой, чтобы она занимала толькопространство столбцов.См. https://datatables.net/extensions/responsive/
  2. или вы можете просто добавить стиль overflow: scroll к столбцу, который включает таблицу.
...