数据表自举模式宽度

在我的模式我试图把数据表在那里，我遇到的问题是，宽度不正确，应该是模态的宽度，但它实际上是这样的数据表自举模式宽度

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

来源

2016-04-11 Kieron606

我们能看到你的HTML？ – Kypaz

@Kypaz现在就加入。 – Kieron606

你有没有style =“width：100％;”为您的

html元素？ –

回答

对于初学者尝试添加下面的类到表元素

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

这将是很好的，如果你能与虚拟数据代码的小提琴解决您的问题。

来源

2016-04-11 08:38:04

感谢Prakash＆Francois，不认为这会是问题，但事实证明它是。 – Kieron606

如果我的回答完全满足您的需求，您可以接受它作为回答，以便其他人也可以从中受益。 –

我会接受它作为答案，我必须先等待10分钟。 – Kieron606

我不认为接受的答案是正确的答案。应该根本不需要改变CSS。这可能会在其他地方引起意外的问题问题在于，容器（模式）在数据表呈现时没有完全建立。看columns.adjust()：

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

或

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

来源

2016-04-11 08:52:13 davidkonrad

这不适合我。 – Kieron606

我觉得这是更合适的解决方案，

首先让你的表格宽度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(); 
});

来源

2017-01-24 06:03:12

这工作就像一个魅力！ – josemaria

谢谢@ josemaria如果你觉得这有帮助。 :) –

数据表自举模式宽度

回答

相关问题