datatables Verbergen der Spalte auf eigene

Question

Was könnte dazu führen, dass meine Spalte versteckt/komprimiert wird. Ein Pluszeichen wird neben die Zeile gesetzt. Tut mir leid, ich bin mir nicht sicher, wie das aufgerufen wird, um die Datenquellen-Site zu überprüfen.

kommt es vor, nach dem Aufruf Spalte passen Sie die Header zu beheben, sobald das modale dargestellt ist.

var dtUsers = $('#table-user-results').DataTable({ 
     scrollY: "40vH", 
     scroller: true, 
     responsive: true 
    }); 

    $(document).on('shown.bs.modal', '#list-manage-users-modal', function() { 
     dtUsers.columns.adjust().draw(); 
    }); 

Die Tabelle

<table id="table-user-results" class="table table-striped table-bordered table-hovered dataTable"> 
       <thead class=""> 
        <tr> 
         <th>Name</th> 
         <th>Email</th> 
         <th>Role</th> 
        </tr> 
       </thead> 
       <tbody> 
        @foreach (var user in Model) 
        { 
         <tr id="@user.ID" class="@(!user.Email.Equals(User.Identity.Name, StringComparison.InvariantCultureIgnoreCase) ? "user-results-context" : "")"> 
          <td>@user.LastName, @user.FristName</td> 
          <td>@user.Email</td> 
          <td>@user.RoleName</td> 
         </tr> 
        } 
       </tbody> 
      </table> 

AUSGABE UPDATE

So das Problem ausgelöst wird, wenn es nicht genügend Daten, die scroller erfordert.

Answer 1

Sie verwenden Responsive Erweiterung, die Spalten verbirgt, wenn sie nicht in die Ansicht passen.

Wenn Sie jedoch die Tabelle im modalen Fenster anzeigen, erkennt die Responsive-Erweiterung die Spaltenbreiten möglicherweise nicht richtig, da die Tabelle ursprünglich ausgeblendet wurde.

Die Lösung dazu ist, responsive.recalc() API-Methode zusätzlich zu columns.adjust() zu verwenden.

Da Sie die Scroller-Erweiterung verwenden, müssen Sie auch die API-Methode scroller.measure() aufrufen.

Siehe den Code unten:

$(document).on('shown.bs.modal', '#list-manage-users-modal', function(){ 
    $($.fn.dataTable.tables(true)).DataTable() 
     .columns.adjust() 
     .responsive.recalc() 
     .scroller.measure(); 
}); 

Darüber hinaus müssen Sie scrollCollapse: true Option, um da es eine Inkompatibilität Fehler in diesen beiden Erweiterungen zu sein scheint. Weitere Informationen finden Sie unter issue #854 on GitHub.

Code und Demonstration siehe this example.