Datatables 引导模式和响应数据表

在XPages应用程序中，我使用引导模式和datatables插件。在datatables网站上，我阅读了以引导模式加载表时重新计算响应性的内容，例如：

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

因为我使用的是XPages，所以我的ID是动态的，所以我必须调用一个helper函数：

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表，但不响应

另一个缺点是，只有第一个表呈现为DataTables表，而不是其他表（对话框中有多个自定义控件）

我做错了什么？

• 如果

  {id:tableObj}

  是一个表，则无需执行

  css（'display'，'table'）

• 为了使表具有响应性，您需要为响应性扩展包含JS/CSS代码，并相应地初始化您的表，有关更多详细信息，请参阅扩展。确保使用以获取最新版本

• 如果要针对多个表，则需要使用class或

  table

  标记名，或为每个表重复初始化代码

• 仅当模态变为可见时，才需要使用调整列宽，并使用重新初始化响应扩展

例如：

//初始化模式中的所有表
var table=x$（'#{id:bootstrapModal}table'）.DataTable({
回答：对
});
//当显示模式窗口时
x$（'#{id:bootstrapModal}'）.on（'show.bs.modal'，function（）{
//调整列宽并重新初始化响应扩展
x$（'#{id:bootstrapModal}table'）.DataTable（）
.columns.adjust（）
.responsive.recalc（）；
});
//显示模式窗口
x$（'#{id:bootstrapModal}'）.modal（'show'）；

这是可行的，尽管我注意到dataTables表分配了一个宽度样式属性，该属性的值为对话框所在的？？？。包含dataTables的模式具有不同的宽度：-/