Tableaux7 ressources dans cette catégorie

Retrouvez ici tous les meilleurs téléchargements

En partant d'un précédent post de code, j'ai rajouté :
Entete et pied fixe
Paramétrage hauteur et largeur colonne
Suppression
selection
tri multi-colonne : avec touche alt + clic souris sur nom colonne

Le tout se basant sur le design jqueyUI

L'idée est de repartir d'un précédent post mais en retirant le TableSorter. De plus, le tri et le filtrage se fait côté serveur pour garder de petite transaction.

A partir du projet tablesorter, l'idée est d'avoir un exemple au plus simple, avec le minimum de fichier en utilisant le custom de son jquery ui pour faciliter le design.

Fonction inArray pour chercher dans un tableau

Tableau avec entête et pied fixe et scroll sur les données.

Cet exemple montre comment déplacer une colonne d'un tableau HTML.
Pour déplacer une colonne, il faut cliquer sur l'en-tête de la colonne puis déplacer la souris sur l'en tête de la colonne avant laquelle on veut l'insérer puis, relâcher la souris.
Pour activer le déplacement de colonne sur un tableau, il faut appeler la fonction ajouterDeplacerColonne(id du tableau ou noeud du tableau)
Pour de plus amples informations, voir les commentaires dans l'exemple.

Cet exemple montre comment il est possible de redimensionner une colonne dans un tableau à l'aide de la souris.
Pour mettre en place la fonctionnalité, il suffit d'appeler la fonction ajouterRedimensionnerColonne('letableau') en lui donnant l'id du tableau.
Ensuite, il suffit de déplacer la souris vers le bord droit de la colonne à déplacer, de cliquer lorsque le pointeur de la souris change et de la déplacer, et enfin de la relâcher lorsque la largeur de colonne voulue est atteinte. Pour de plus amples informations, voir les commentaires dans le code.