datatables在bootstrap3模式对话框中没有响应

Question

我正在为我的表使用datatables插件,请注意我使用的是响应式数据表.我也在使用bootstrap v3.2.0.我已经在bootstrap模态对话框中放置了响应式数据表.但问题是,我面临的是我的表没有对模态对话框做出响应,但它在普通页面上变得响应.我发现如果我从模态代码中删除类名"模态"然后它变得响应所以很明显类模态正在创建问题,但我不能删除模态类,否则模态将无法工作.

这是模态类的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;
}

我的模态代码:

    <div class=" fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h4 class="modal-title" id="myModalLabel">Send File Popup</h4>
      </div>
      <div class="modal-body">    
         <table id="filepopupTable" class="display responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                 <tr>
                 <th class="padding10">  <div class="ckbox ckbox-default">
            <input type="checkbox" id="selectall" value="1" class="mt0 mr10" />
            <label for="selectall" class="mr5">Select All</label>
          </div></th>
                    <th>File Name</th>
                    <th>Size</th>
                     <th>Uploaded On</th>
                    <th data-sort-ignore="true">Quick Action</th>

                 </tr>
              </thead>
              <tbody>
                 <tr class="odd gradeX">
                  <td class="thmb">
                                    <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check1" value="1" />
                  <label for="check1"></label>
                </div>
                                  </td>
                    <td>Life brochure.doc</td>
                    <td>3 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
                 <tr class="even gradeC">
                  <td class="thmb">
                                   <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check2" value="1" />
                  <label for="check2"></label>
                </div>
                                  </td>
                      <td>Provider_list.xlxs</td>
                    <td>34 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
                 <tr class="odd gradeA">
                  <td class="thmb">
                                   <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check3" value="1" />
                  <label for="check3"></label>
                </div>
                                  </td>
                    <td>My_logo.png</td>
                    <td>443 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
               </tbody>

                </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>

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

非常感谢帮助!!

Answer 1

它不是因为模态类导致问题,因为模态类默认隐藏其内容.

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

要在显示模式后重新计算列宽,请解决此问题.首先是表格:

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

然后显示当你显示模态时

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

更多信息可以在这里找到:http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29

Answer 2

这对您有帮助吗：http ://codepen.io/panchroma/pen/nBmbL ？

HTML 不变。CSS 与上面一样，添加了

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

正如您所看到的，我正在阻止模态窗口折叠得太小。

祝你好运！