Bootstrap Модальные и отзывчивые данные

Question

В приложении XPages я использую Bootstrap modal и плагин datatables. На сайте DataTables я прочитал пересчитывать отзывчивость при загрузке таблицы в Bootstrap модальных например:

var table = $('#example').DataTable(); 
$('#example').css('display', 'table'); 
table.responsive.recalc(); 

Потому что я работаю с XPages моих идентификаторов динамичны Так что я должен вызвать вспомогательную функцию:

var table = x$('#{id:tableObj}').DataTable(); 
x$('#{id:tableObj}').css('display', 'table'); 
table.responsive.recalc(); 

Так что мой окончательный код выглядит следующим образом:

x$('#{id:bootstrapModal}').modal('show');var table = 
x$('#{id:tableObj}').DataTable();x$('#{id:tableObj}').css('display', 
'table');table.responsive.recalc(); 

id:tableObj является идентификатором xp:table управления, который находится в пользовательском элементе управления ,

Хорошо, что он отображает первую таблицу в диалоговом окне в качестве таблицы данных, но не реагирует.

Еще плохо то, что только первая таблица отображается в виде таблицы DataTables, а не другие таблицы (несколько пользовательских элементов управления в диалоговом окне.

Что я делаю неправильно?

Answer 1

• Там нет необходимости делать css('display', 'table') если #{id:tableObj} является таблицей.

• для того, чтобы сделать таблицы отзывчивыми вам необходимо включить JS/CSS код для Отзывчивого расширения и инициализировать таблицы соответственно, см Responsive расширение для получения более подробной информации. Обязательно используйте Download builder, чтобы получить последнюю версию.

• Если вы хотите настроить таргетинг на несколько таблиц, вам нужно либо использовать имя тега класса или table, либо повторить код инициализации для каждой таблицы.

• Вам необходимо настроить ширину столбцов с помощью columns.adjust() и повторно инициализировать ответное расширение с помощью responsive.recalc() только тогда, когда модальное становится видимым.

Например:

// Initialize all tables inside the modal 
var table = x$('#{id:bootstrapModal} table').DataTable({ 
    responsive: true 
}); 

// When modal window is shown 
x$('#{id:bootstrapModal}').on('shown.bs.modal', function() { 
    // Adjust column width and re-initialize Responsive extension 
    x$('#{id:bootstrapModal} table').DataTable() 
     .columns.adjust() 
     .responsive.recalc(); 
}); 

// Show modal window 
x$('#{id:bootstrapModal}').modal('show');