數據表自舉模式寬度

在我的模式我試圖把數據表在那裏，我遇到的問題是，寬度不正確，應該是模態的寬度，但它實際上是這樣的數據表自舉模式寬度

我的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如果你覺得這有幫助。 :) –

相關問題