Démo classe HTMLTableTools
(javascript)

fichiers nécessaires / needed files

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="builder.js"></script>
<script type="text/javascript" src="HTMLTableTools.js"></script>


Syntax :

var myTable = new HTMLTableTools( tableID [, options] );

avec tableID = identifiant tu tableau à gérer
et options = vos options personalisées (remplacent les options par défault)

Exemple avec le tableau de cette page dont l'id est 'users':

Après le tableau HTML :

<script type="text/javascript">
var options = {
reorderCol: true,
showSortIndex: true
}
var usersTable = new HTMLTableTools( 'users', options );
</script>

Options par défaut (si aucune option n'est fournie à l'apelle de HTMLTableTools()) / default options (if there is no option passed to HTMLTableTools when called) :

{ // sort options
pathToImgs: '',
imgUp: 'fleche_haut.png',
imgUpActive: 'fleche_haut_active.png',
imgDown: 'fleche_bas.png',
imgDownActive: 'fleche_bas_active.png',
skipCells: [],
multiColSort: true,
reorderCol: false,
showSortIndex: false,
// highlighting and select options
highlight: true,
highlightColumn: false,
selectRow: true,
multipleSelect: true
}

Du côté css / css styles :

Les style à définir dans votre page ou dans une feuille de style sont :
styles to be defined in your page or in a separated style sheet :
rowA : style utilisée pour la coloration des lignes en alternance
style used to alternate table coloration
rowB : deuxième style utilisée pour la coloration des lignes en alternance
second style used to alternate table coloration
highlighted : style utilisée pour la mise en surbrillance des lignes survolées
style used to highlight rows on mouser over
selectedRow : style utilisée pour les lignes sélectionnées
style used for selected rows
imgStatus : style utilisée pour les images ajoutées servant au tri
style used for added images used to sort the table
sortIndex : style utilisée pour le <span> encadrant l'index de tri
style used for the <span> that surrond the sort index

la classe HTMLTableTools utilise / HTMLTableTools use

prototype.js v1.4 http://prototype.conio.net/
(fourni avec HTMLTableTools ou téléchargable avec la version 1.5.1 de scriptaculous)
(included with the download or downloadable with scriptaculous version 1.5.1)
builder.js http://script.aculo.us/
(provient des librairies scriptaculous)
(comes from scriptaculous libraries)

autres scripts utilisés sur cette page / other scripts used on this page

scriptaculous v1.5.1 http://script.aculo.us/
(ensembles de librairies vous permettant de gérer facilement différents effets visuels (apparition de ce bloc par exemple), des slider, des listes triables (drag and drop), etc, à tester absolument)
(useful libraries to manage visual effects, sliders, drag and drop, it is really cool)
behaviour.js v1.1 http://bennolan.com/behaviour/
(une solution parfaite pour faire disparaitre les disgracieux onClick="..." et autres comportement de tag de votre page HTML, regardez le code de la page et le fichier myBehaviourRules.js pour avoir une idée)
(the solution to unobtrusive javascript behaviours)

Version 2.0

HTMLTableTools.zip
HTMLTableTools.tar.gz

Lignes sélectionnées / selected rows :