Bootstrap模态宽度中的数据表

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>

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

Answer 2

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

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

如果您可以使用虚拟数据来修改代码来解决您的问题，那就太好了。