Twitter bootstrap 3 datatables在bootstrap3模态对话框上没有响应

我正在为我的表使用datatables插件，请注意，我正在使用响应datatables。 另外，我使用的是BootstrapV3.2.0。我已经在bootstrap modals对话框中设置了响应数据表。但我面临的问题是，我的表格在模式对话框上并没有响应，但在正常页面上却有响应。 我发现，如果我从模态代码中删除类名modal，那么它就会响应，因此很明显，类modal正在产生问题，但我不能删除modal类，否则modal将无法工作

以下是模态类的css：

.modal {
    bottom: 0;
    display: none;
    left: 0;
    outline: 0 none;
    overflow-x: auto;
    overflow-y: scroll;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1050;
}

我的模式代码：

请大家检查此问题并尝试修复它

非常感谢您的帮助

这对你有帮助吗：

HTML是不变的。CSS如上所述，添加了

.modal-content{
min-width: 300px; /* adjust as necessary */
}  

如您所见，我正在阻止模态窗口崩溃得太小

---

祝你好运

尝试在桌子周围添加包装。这对我有点作用。我无法让它在面板中工作，但它确实在包装器中工作得更好。

与其说是模态类造成了问题，不如说是模态类默认隐藏了它的内容

响应DataTables扩展将不会在初始化期间隐藏的表上运行

若要在显示模式后解决此问题，请重新计算列宽。首先是表格：

var myTable = $("#myTable").DataTable({});

然后在以后显示模式时显示

$("#myModal").modal('show');
myTable.responsive.recalc();

---

更多信息可以在这里找到：

要补充KyleT所说的内容，请确保在计算尺寸之前等待模态显示，可以这样做

//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
               //Get the datatable which has previously been initialized
                var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
                //recalculate the dimensions
                dataTable.columns.adjust().responsive.recalc();

            });

数据表示例-引导3 var$j=jQuery.noConflict； $jdocument.readyfunction{ $j'example'.DataTable； }; $document.readyfunction{ }; &时代；关 名称 位置 办公室 年龄 开始日期 佐藤航空 会计 东京 33 2008/11/28 布里尔·威廉姆森 集成专家 纽约 61 2012/12/02 海莉·肯尼迪 高级市场设计师 伦敦 43 2012/12/18 迈克尔·席尔瓦 营销设计师 伦敦 66 2012/11/27 柏德 首席财务官首席财务官 纽约 64 2010/06/09 戴里奥斯 人事领导 爱丁堡 35 2012/09/26 菲奥娜绿色 營運長 旧金山 48 2010/03/11 寿伊图 区域营销 东京 20 2011/08/14 泽奈达·弗兰克 软件工程师 纽约 63 2010/01/04 佐丽塔·塞拉诺 软件工程师 旧金山 56 2012/06/01 詹妮弗·阿科斯塔 初级Javascript开发人员 爱丁堡 43 2013/02/01 卡拉·史蒂文斯 营业员 纽约 46 2011/12/06 邮寄

---

多谢各位

//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
               //Get the datatable which has previously been initialized
                var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
                //recalculate the dimensions
                dataTable.columns.adjust().responsive.recalc();

            });