数据表在bootstrap3模态对话框上未响应 [英] datatables does not becomes responsive on bootstrap3 modal dialog
问题描述
我正在为表使用datatables插件，请注意，我正在使用响应式数据表. 我也在使用bootstrap v3.2.0.我在引导程序模态对话框中放置了响应式数据表.但是问题，我面对的是我的表在模式对话框上没有响应，但是在普通页面上却响应了. 我发现，如果我从模态代码中删除了类名"modal"，则它变得具有响应性，因此很明显，模态类正在产生问题，但我也无法删除模态类，否则模态将无法正常工作.
I am using datatables plugin for my table, please note that I am using responsive datatables. Also I am using bootstrap v3.2.0. I have put-up my responsive datatables on bootstrap modals dialog. But problem, I am facing is that my table is not becoming responsive on modal dialog, it becomes responsive on normal page though. I have found if i remove the class name "modal" from modal code then it becomes responsive so it is clear that class modal is creating problem but i can not remove modal class as well otherwise modal won't work.
这是模式类的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">×</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>
请大家，检查此问题并尝试解决.
Please everyone, check this issue and try to fix it.
非常感谢您的帮助！
推荐答案
模式类引起问题的原因不多，因为模式类默认情况下会隐藏其内容.
Its not so much that the modal class is causing the issue as it is the fact that the modal class hides its contents by default.
响应式数据表扩展名将不会在初始化期间隐藏的表上运行.
The Responsive DataTables extension will not run on a table that is hidden during initialization.
要解决此问题，请在显示模式后重新计算列宽.首先是表格:
To work around this issue after you show the modal recalculate the column widths. First the table:
var myTable = $("#myTable").DataTable({});
然后在显示模态时显示
$("#myModal").modal('show');
myTable.responsive.recalc();
可在此处找到更多信息: http://datatables .net/extensions/response/reference/api/response.recalc％28％29
More information can be found here: http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29
这篇关于数据表在bootstrap3模态对话框上未响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
