Come ridimensionare in modo interattivo una colonna fissa in FixedColumns di DataTable Plugin

Question

Ho la seguente tabella:

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

Utilizzando questo script posso scorrere il 2 ° colonne in avanti e lasciare che prima colonna (First name) fissa.

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

JSFiddle

Quello che voglio fare è quello di manualmente interattivo ridimensionare la prima colonna al volo. Come posso ottenerlo?

Answer 1

Non esiste un metodo nativo in FixedColumns API per fare questo. Invece, impostare la larghezza attraverso header(), qui l'impostazione della prima colonna a 200px:

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

table.draw() risultati in doppie barre di scorrimento (scomparendo sul ridimensionamento però). In qualche modo FixedColumns non è completamente incluso in un draw() - nemmeno le colonne fisse update() lo fanno correttamente. Ma l'attivazione di resize sulla finestra ha il compito giusto.

violino biforcuta ->https://jsfiddle.net/k7err1vb/

---

Aggiornamento. Il significato della domanda è cambiato completamente (?)

Bene, c'era una volta un ottimo plugin ColReorderWithResize.js, ma questo funziona male con dataTables 1.10.x. Quindi potresti eseguire il downgrade se la richiesta di una colonna fissa ridimensionabile è essenziale. A parte la nuova API e lo stile di default non c'è molta differenza tra 1.9.xe 1.10.x - usa me stesso 1.9.x in un progetto proprio per la necessità di ColReorderWithResize.

Alcuni hanno creato un plug-in colResize ->https://github.com/Silvacom/colResize che funziona con 1.10.2 e versioni successive. Qui utilizzato al violino di OP:

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

demo ->https://jsfiddle.net/mhco0xzs/ e "funziona" - in qualche modo - ma non così liscia come i buoni vecchi ColReorderWithResize.js. Qualcuno potrebbe accettare la sfida al referee ColReorderWithResize.js, ma io stesso non ho certamente tempo per farlo al momento.

Answer 2

Dovresti provare a utilizzare un plug-in per aggiungere funzionalità di intestazione ridimensionabili. Si può provare a utilizzare questo: http://www.bacubacu.com/colresizable/

La domanda è stato chiesto e ha risposto sul StackOverflow.com già qui: Resizable table columns with jQuery

Answer 3

Ho anche problemi come te e io uso la seguente soluzione.

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