我正在为我的桌子使用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">×</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>
请大家，检查此问题并尝试解决。
非常感谢帮助!!
答案 0 :(得分：6)
它不是因为模态类导致了这个问题，因为默认情况下模态类隐藏了它的内容。
响应式DataTables扩展程序不会在初始化期间隐藏的表上运行。
在显示模式重新计算列宽后，要解决此问题。首先是表格：
var myTable = $("#myTable").DataTable({});
然后显示何时显示模态
$("#myModal").modal('show');
myTable.responsive.recalc();
可在此处找到更多信息：http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29
答案 1 :(得分：2)
要添加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();
});
答案 2 :(得分：1)
这对你有什么帮助：http://codepen.io/panchroma/pen/nBmbL？
HTML不变。 CSS如上所述，增加了
.modal-content{
min-width: 300px; /* adjust as necessary */
}
正如您所看到的，我将停止模态窗口的折叠太小。
祝你好运！答案 3 :(得分：0)
尝试在表格周围添加<div class="table-responsive"></div>包装器。它对我有用（有点）。我无法让它在一个面板中工作，但是使用包装器它确实工作得更好。
答案 4 :(得分：0)
<html>
<head>
<!--Modal Goes First -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<!--Modal End -->
<!-- DataTable -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Bootstrap 3</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<!-- DataTable End -->
<script type="text/javascript" class="init">
var $j = jQuery.noConflict();
$j(document).ready(function (){
$j('#example').DataTable();
});
$(document).ready(function(){
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal" class="btn btn-success btn-lg" data-target="#myModal">My Modal</a>
<div class="modal fade" 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>
</div>
<div class="modal-body">
<table id="example" class="table table-striped table-bordered" style="width:100%"></body>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-default">Close</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
/ *我有类似的问题，我需要模态内的数据表（搜索/排序/分页），功能齐全的代码在这里：* /