javascript - 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>

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();
});