Question

在XPages应用程序中，我使用的是Bootstrap模式和datatables插件。在datatables网站上，我读过在Bootstrap模式中加载表时重新计算响应性，例如：

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

因为我正在使用XPages，我的ID是动态的所以我必须调用辅助函数：

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控件的ID。

好处是它将对话框中的第一个表呈现为数据表表，但没有响应。

另一个坏处是只有第一个表呈现为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');

Bootstrap模态和响应数据表

1 个答案: