Wie interaktiv eine feste Säule in Tables der FixedColumns Plugin

Question

die Größe habe ich die folgende Tabelle:

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>First name</th> 
      <th>Last name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
      <th>Extn.</th> 
      <th>E-mail</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td>Tiger</td> 
      <td>Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
      <td>5421</td> 
      <td>t.nixon@datatables.net</td> 
     </tr> 
    </tbody> 
</table> 

dieses Skript verwenden kann ich weiter die zweiten Spalten blättern und erste Spalte (First name) befestigt lassen.

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     scrollY:  "300px", 
     scrollX:  true, 
     scrollCollapse: true, 
     paging:   false 
    }); 
    new $.fn.dataTable.FixedColumns(table); 
}); 

JSFiddle

Was ich will ist manuell interaktiv on the fly in der ersten Spalte tun ändern. Wie kann ich das erreichen?

Answer 1

Es gibt keine native Methode in FixedColumns API dies zu tun. Stattdessen legen die Breite durch header(), hier die erste Spalte zu 200px Einstellung:

table.tables().header().to$().find('th:eq(0)').css('min-width', '200px'); 
$(window).trigger('resize'); 

table.draw() Ergebnisse im Doppelrollbalken (verschwindet auf Resize obwohl). Irgendwie FixedColumns ist nicht vollständig in einem draw() enthalten - nicht einmal FixedColumns update() macht dies richtig. Aber das Auslösen von resize auf dem Fenster macht den Job richtig.

gegabelt Geige ->https://jsfiddle.net/k7err1vb/

---

aktualisieren. Die Bedeutung der Frage komplett geändert (?)

Nun, es gab einmal ein großes Plugin ColReorderWithResize.js, aber das funktioniert schlecht mit DataTables 1.10.x. Sie können also ein Downgrade durchführen, wenn die Nachfrage nach einer veränderbaren festen Spalte wesentlich ist. Abgesehen von der neuen API und Standard-Styling gibt es nicht so viel Unterschied zwischen 1.9.x und 1.10.x - verwenden Sie 1.9.x selbst in einem Projekt genau wegen der Notwendigkeit von ColReorderWithResize.

Einige Leute haben ein ColResize-Plugin gemacht ->https://github.com/Silvacom/colResize, das mit 1.10.2 und höher funktioniert. Hier verwendete OP Geige:

var table = $('#example').DataTable({ 
    dom: 'Zlfrtip', 
    //target first column only 
    colResize: { 
     exclude: [2,3,4,5,6,7] 
    }, 
    ... 
}) 

Demo ->https://jsfiddle.net/mhco0xzs/ und es "funktioniert" - irgendwie - aber bei weitem nicht so glatt wie der guten alten ColReorderWithResize.js. Jemand könnte die Herausforderung annehmen, ColReorderWithResize.js zu refaktorieren, aber dafür habe ich im Moment sicher keine Zeit.

Answer 2

Sie sollten versuchen, ein Plug-in zu verwenden, um größenveränderbare Header-Funktionalität hinzuzufügen. Sie können versuchen, dies mit: http://www.bacubacu.com/colresizable/

Die Frage wurde gestellt und beantwortet auf StackOverflow.com bereits hier: Resizable table columns with jQuery

Answer 3

ich auch Probleme wie Sie gerade haben, und ich verwenden Sie die folgende Lösung.

window.fixedColumns = new $.fn.dataTable.FixedColumns(table , { leftColumns: 3});  

//Events occur when changing column width.(paginate, sort , click, ...) 
// $('.sorting').click.... 
// $('.paginate_button').click.... 

$('.DTFC_Cloned').width();  
fixedColumns.fnRedrawLayout(); 

http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout