twitter-bootstrap-3 - 数据表在 bootstrap3 模式对话框上没有响应

Question

我正在为我的表使用数据表插件，请注意我使用的是响应式数据表。
我也在使用 bootstrap v3.2.0。我在 bootstrap modals 对话框中放置了我的响应式数据表。但是，我面临的问题是我的表格在模态对话框上没有响应，但它在普通页面上变得响应。
我发现如果我从模态代码中删除类名“模态”，那么它就会变得响应，所以很明显类模态正在产生问题，但我也不能删除模态类，否则模态将不起作用。

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

与其说是模态类导致了问题，不如说是模态类默认隐藏其内容。

Responsive DataTables 扩展不会在初始化期间隐藏的表上运行。

要在显示模态后解决此问题，请重新计算列宽。先上表:

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

然后稍后显示当您显示模态时

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

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