Bootstrap 模态宽度中的数据表

Question

在我的模态中，我试图将 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>';
         }
      }]
  });
}

我的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>

原文由 Kieron606 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于初学者，请尝试将以下类添加到您的表格元素中

.dataTableLayout {
    table-layout:fixed;
    width:100%;
}

如果您可以使用 虚拟 数据来解决您的问题，那将是一件好事。

原文由 Prakash Thete 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我发现这个更合适的解决方案，

首先让你的表格宽度 100% 像这样：

 <table width="100%" id="datatable"></table>

然后初始化你的表

$('#datatable').DataTable();

这个这个

$(document).on('shown.bs.modal', function (e) {
      $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});

原文由 J.C 发布，翻译遵循 CC BY-SA 3.0 许可协议