web-dev-qa-db-fra.com

Comment redimensionner de manière interactive une colonne fixe dans le plugin FixedColumns de DataTables

J'ai le tableau suivant:

<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>[email protected]</td>
        </tr>
    </tbody>
</table>

En utilisant ce script, je peux faire défiler les 2ème colonnes et laisser la 1ère colonne (First name) corrigé.

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

JSFiddle

Ce que je veux faire, c'est manuellement redimensionner de manière interactive la première colonne à la volée. Comment puis-je y parvenir?

enter image description here

javascriptjqueryhtmldatatablesjquery-datatables
13
neversaint

Il n'y a pas de méthode native dans API FixedColumns pour ce faire. Au lieu de cela, définissez la largeur via header(), en définissant ici la première colonne sur 200px:

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

table.draw() se traduit par des barres de défilement doubles (disparaissant lors du redimensionnement). D'une manière ou d'une autre, FixedColumns n'est pas entièrement inclus dans une draw() - même FixedColumns update() ne le fait pas correctement. Mais déclencher resize sur la fenêtre fait le travail correctement.

violon fourchu -> https://jsfiddle.net/k7err1vb/

Mise à jour . Le sens de la question a complètement changé (?)

Eh bien, il y avait une fois un excellent plugin ColReorderWithResize.js , mais cela fonctionne mal avec dataTables 1.10.x. Vous pouvez donc rétrograder si la demande d'une colonne fixe redimensionnable est essentielle. Mis à part la nouvelle API et le style par défaut, il n'y a pas tellement de différence entre 1.9.x et 1.10.x - utilisez moi-même 1.9.x dans un projet en raison de la nécessité de ColReorderWithResize.

Un gars a créé un plugin colResize -> https://github.com/Silvacom/colResize qui fonctionne avec 1.10. 2 et plus. Ici utilisé sur le violon d'OP:

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

démo -> https://jsfiddle.net/mhco0xzs/ et cela "fonctionne" - en quelque sorte - mais pas autant que lisse comme le bon vieux ColReorderWithResize.js. Quelqu'un pourrait relever le défi de refaçonner ColReorderWithResize.js, mais je n'ai certainement pas le temps pour le moment.

11
davidkonrad

Vous devriez essayer d'utiliser un plugin pour ajouter une fonctionnalité d'en-tête redimensionnable. Vous pouvez essayer d'utiliser ceci: http://www.bacubacu.com/colresizable/

La question a été posée et répondue sur StackOverflow.com déjà ici: Colonnes de table redimensionnables avec jQuery

1
Samvel Avanesov

J'ai également des problèmes comme vous et j'utilise la solution suivante.

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

1
PufferTD