twitter-bootstrap Bootstrap 模态宽度中的数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36543622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables in Bootstrap modal width
提问by Kieron606
In my modal I am trying to put Datatables in there, the problem I'm having is that the width is incorrect, it should be the width of the modal but it is actually like this
在我的模态中，我试图将数据表放在那里，我遇到的问题是宽度不正确，它应该是模态的宽度，但实际上是这样的
My jQuery calling the Datatables
我的 jQuery 调用数据表
function getValidTags(){
var ruleID = $('.ruleID').val();
var table = $('.valid-tags').DataTable({
"ajax": {
"url": "/ajax/getValidTags.php",
"type": "POST",
"data": {
ruleID: ruleID
},
},
"columnDefs": [{
"targets": 2,
"render": function(data, type, full, meta){
return '<button class="btn btn-default btn-sm" type="button">Manage</button> <button class="btn btn-danger btn-sm">Delete</button>';
}
}]
});
}
My HTML
我的 HTML
<!-- Modal where you will be able to add new rule -->
<div class="modal fade validation-list-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-wide">
<div class="modal-content">
<div class="modal-header modal-header-custom">
<input class="ruleID" type="hidden"></input>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title modal-title-main">Create New Rule</h4>
</div>
<div class="modal-body">
<div class="topBar">
<div>
<input type="text" class="validTags inputTextStyling">
</div>
</div>
<table class="table table-striped table-condensed valid-tags">
<thead>
<tr>
<th>Tag Name</th>
<th>Autofixes</th>
<th>Manage</th>
</tr>
</thead>
<tbody class="validTagsTable">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="saveValidTags">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
采纳答案by Prakash Thete
For starters try adding following class to your table element
对于初学者，请尝试将以下类添加到您的表格元素中
.dataTableLayout {
table-layout:fixed;
width:100%;
}
It would be good if you could make a fiddleof your code with dummy data for solving your problem.
这将是很好，如果你可以做一个小提琴与虚拟数据代码的解决您的问题。
回答by J.C
I find this more appropriate solution,
我发现这个更合适的解决方案，
First make your table width 100% like this:
首先使您的表格宽度为 100%，如下所示：
<table width="100%" id="datatable"></table>
then initialize your table
然后初始化你的表
$('#datatable').DataTable();
and this this
而这个这个
$(document).on('shown.bs.modal', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});
回答by davidkonrad
I dont think the accepted answer is thecorrect answer. There should be no need at all for altering the CSS. It could cause unexpected issues elsewhere. The problem is, that the container (the modal) not is fully established at the time the dataTable is rendered. Look at columns.adjust():
我不认为接受的答案是在正确的答案。根本不需要更改 CSS。它可能会导致其他地方出现意外问题。问题是，在呈现 dataTable 时，容器（模态）尚未完全建立。看看columns.adjust()：
var table = $('#example').DataTable({
initComplete: function() {
this.api().columns.adjust()
}
...
})
or
或者
$('.modal').on('shown.bs.modal', function() {
table.columns.adjust()
})
