Bootstrap模态框中的Datatables宽度

Question

在我的模态框中，我正在尝试将Datatables放入其中，但遇到的问题是宽度不正确，它应该是模态框的宽度，但实际上却像这样。

我的jQuery调用Datatables

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

---

你能让我们看看你的HTML吗？ - Kypaz

@Kypaz 刚刚添加了它。 - Kieron606

你的 <table> HTML 元素有使用 style="width:100%;" 吗？ - François Dupont

@FrançoisDupont 谢谢，这个完美地解决了问题。 - Kieron606

Answer 1

我认为这是更合适的解决方案，

首先将您的表格宽度设置为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

---

感谢@josemaria如果您发现这很有帮助。 :) - J.C

Answer 2

首先，尝试将以下类添加到您的表格元素中。

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

如果您能使用虚拟数据制作代码的fiddle，以解决问题，那将非常好。

- Prakash Thete

---

感谢Prakash和Francois，我没想到这会是个问题，但事实证明确实是。 - Kieron606

我将接受它作为答案，但我需要先等待10分钟。 - Kieron606

Answer 3

我认为被接受的答案不是正确的答案。根本不需要修改CSS，因为这可能会导致其他意外问题。问题在于，当渲染dataTable时，容器（模态框）尚未完全建立。请看columns.adjust()：

var table = $('#example').DataTable({
  initComplete: function() {
     this.api().columns.adjust()
  }
  ...
})  

或者

$('.modal').on('shown.bs.modal', function() {
  table.columns.adjust()
})

- davidkonrad

---

我使用了第二个选项（.on('shown.bs.modal')），它非常好用。请确保使用新的datatables api引用表对象。.DataTable而不是.dataTable。 - bluedot

Answer 4

我刚刚在 div 中添加了一个表格，将宽度设置为 100%，并对该 div 应用了 overflow-x:auto 属性，这样就可以正常工作了。

- temo