Jak interaktywnie rozmiaru stałą kolumnę w FixedColumns DataTables męska plugin

Question

mam poniższej tabeli:

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

pomocą tego skryptu mogę przewinąć 2. kolumny naprzód i niech 1 kolumna (First name) przymocowany.

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

JSFiddle

Co chcę zrobić, to ręcznie interaktywnie rozmiar pierwszej kolumny w locie. Jak mogę to osiągnąć?

Answer 1

Nie ma natywna metoda FixedColumns API to zrobić. Zamiast ustawić szerokość poprzez header() tu wyznaczenia pierwszego kolumnę 200px:

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

table.draw() skutkuje podwójnych pasków przewijania (znika po zmianie rozmiaru chociaż). W jakiś sposób FixedColumns nie jest w pełni zawarty w draw() - nawet poprawka FixedColumns update() nie działa poprawnie. Ale wywołanie resize w oknie działa poprawnie.

rozwidlony skrzypce ->https://jsfiddle.net/k7err1vb/

---

Aktualizacja. Znaczenie pytania zmieniło się całkowicie (?)

Cóż, kiedyś była świetna wtyczka ColReorderWithResize.js, ale to działa słabo z DataTables 1.10.x. Więc możesz obniżyć poziom, jeśli zapotrzebowanie na zmienną stałą kolumnę jest niezbędne. Oprócz nowego interfejsu API i domyślnej stylizacji nie ma tak dużej różnicy między 1.9.x a 1.10.x - sam korzystasz z wersji 1.9.x właśnie z powodu potrzeby ColReorderWithResize.

Ktoś zrobił wtyczkę colResize ->https://github.com/Silvacom/colResize, która działa z wersją 1.10.2 i nowszą. Tu stosowane na skrzypcach OP:

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

demo ->https://jsfiddle.net/mhco0xzs/ a ona "działa" - jakoś - ale nie tak gładka jak za starych dobrych ColReorderWithResize.js. Ktoś może podjąć wyzwanie, aby zreorganizować ColReorderWithResize.js, ale ja na pewno nie mam na to czasu w tej chwili.

Answer 2

Powinieneś spróbować użyć wtyczki, aby dodać funkcję nagłówka skalowalnego. Można spróbować użyć tego: http://www.bacubacu.com/colresizable/

Pytanie zostało zadane i odpowiedzi na stackoverflow.com już tutaj: Resizable table columns with jQuery

Answer 3

Mam też problemy tak jak ty i używam następujące rozwiązanie.

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