Comment de manière interactive redimensionner une colonne fixe dans les tables de données de FixedColumns plugin
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>
L'aide de ce script, je peux faire défiler la 2e colonnes de l'avant et laisser la 1ère colonne (First name
) fixe.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
} );
new $.fn.dataTable.FixedColumns( table );
} );
Ce que je veux faire est de manuellement de manière interactive redimensionner la première colonne à la volée. Comment puis-je y parvenir?
OriginalL'auteur neversaint | 2015-05-23
Vous devez vous connecter pour publier un commentaire.
Il n'existe pas de méthode native dans FixedColumns API pour ce faire. Au lieu de cela, fixer la largeur à travers
header()
, ici le réglage de la première colonne à200px
:table.draw()
résultats en double barres de défilement (en train de disparaître lors de la redimensionner si). En quelque sorte FixedColumns n'est pas entièrement inclus dans undraw()
- même pas FixedColumnsupdate()
n'est correcte. Mais le déclenchement deresize
sur la fenêtre n'a le droit de travail.fourche violon> https://jsfiddle.net/k7err1vb/
Mise à jour. Le sens de la question a complètement changé (?)
Bien, il était une fois un super plugin ColReorderWithResize.js, mais cela fonctionne mal avec les tables de données 1.10.x. Donc, vous pourriez décote si la demande pour un redimensionnables colonne fixe est essentiel. En dehors de la nouvelle API
et de style par défaut il n'y a pas tant de différence entre 1.9.x et 1.10.x - utilisation 1.9.x moi-même dans un projet exactement en raison de la nécessité de
ColReorderWithResize
.Certains gars ont fait un colResize plugin -> https://github.com/Silvacom/colResize qui fonctionne avec 1.10.2. Ici utilisé sur OP fiddle :
démo -> https://jsfiddle.net/mhco0xzs/ et il "fonctionne" - en quelque sorte - mais pas aussi lisse que le bon vieux ColReorderWithResize.js. Quelqu'un pourrait relever le défi de refactoriser ColReorderWithResize.js mais moi je l'ai certainement pas le temps pour ça en ce moment.
ColReorderWithResize.js a maintenant été refait, voir jQuery DataTables: réorganisation des Colonnes et le redimensionnement et github.com/jeffreydwalter/ColReorderWithResize.
Nice info; il semble bon, juste inspecté la source, j'aime quand les gens essaient de maintenir le style et les conventions plus ou moins similaire à Alan Jardines de code. Produire une réponse avec ce nouveau plugin et vous avez la garantie d'au moins un upvote 🙂 BTW, ce qui sur le colspan / rowspan exemple? Il pourrait être la réponse canonique pour duper le martelage de toutes ces questions
Je n'ai pas oublier colspan/rowspan exemple et de la planification de travailler sur la prochaine. Je vais expérimenter avec ColReorderWithResize et FixedColumn plugins et mise à jour de l'article, ou de poster la solution ici, ou les deux.
OriginalL'auteur davidkonrad
Vous devez essayer d'utiliser un plugin pour ajouter redimensionnable en-tête de la fonctionnalité. Vous pouvez essayer d'utiliser ce: http://www.bacubacu.com/colresizable/
La question a été posée et répondue sur StackOverflow.com déjà ici: Redimensionner les colonnes de la table avec jQuery
OriginalL'auteur Samvel Avanesov
J'ai aussi des problèmes, tout comme vous et j'ai utiliser la solution suivante.
http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout
OriginalL'auteur PufferTD