Bonjour,
J'essaye de combiner PmWiki avec TinyTableV3 afin de rendre les tableaux triables et filtrables.
Mais j'ai besoin d'insérer du code HTML avant et après les lignes du tableau écrites par les visiteurs.
Le code à insérer avant ressemblerait à quelque chose comme ceci :
Le code à insérer après serait à peu près celui-ci :
Ce code doit être inséré dans toutes les pages appartenant au groupe Tableau.
J'ai essayé plusieurs choses :
Mais il y a aussi un autre problème parce que la création d'un tableau en wiki ajoute automatiquement les balises <table> et </table>. Or les balises d'entête <th>, qui viennent après la balise <table>, doivent contenir du code HTML : <th><h3>Produit</h3></th> pour que le script fonctionne et que le tableau devienne triable (voir le code ci-dessus).
Ainsi, une solution serait que seules les balises <tr> et <td> soient ajoutées lors de l'enregistrement de la page et pas les balises <table> et </table>.
Une autre solution serait de trouver un moyen de parvenir à ce code après transformation en html : <th><h3>Produit</h3></th>.
Voici l'adresse du site : http://comparonslesprix.free.fr/pmwiki/
C'est un site de comparaison de prix par/pour les consommateurs.
Je vous remercie par avance pour votre aide !
Cordialement,
J'essaye de combiner PmWiki avec TinyTableV3 afin de rendre les tableaux triables et filtrables.
Mais j'ai besoin d'insérer du code HTML avant et après les lignes du tableau écrites par les visiteurs.
Le code à insérer avant ressemblerait à quelque chose comme ceci :
- Code: Tout sélectionner
<div id="tablewrapper">
<div id="tableheader">
<div class="search">
<select id="columns" onchange="sorter.search('query')"></select>
<input type="text" id="query" onkeyup="sorter.search('query')" />
</div>
<span class="details">
<div>Records <span id="startrecord"></span>-<span id="endrecord"></span> of <span id="totalrecords"></span></div>
<div><a href="javascript:sorter.reset()">reset</a></div>
</span>
</div>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">
<thead>
<tr>
<th class="nosort"><h3>ID</h3></th>
<th><h3>Name</h3></th>
<th><h3>***spam***</h3></th>
<th><h3>Email</h3></th>
<th><h3>Birthdate</h3></th>
<th><h3>Last Access</h3></th>
<th><h3>Rating</h3></th>
<th><h3>Done</h3></th>
<th><h3>Salary</h3></th>
<th><h3>Score</h3></th>
</tr>
</thead>
<tbody>
Le code à insérer après serait à peu près celui-ci :
- Code: Tout sélectionner
</tbody>
</table>
<div id="tablefooter">
<div id="tablenav">
<div>
<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div>
<select id="pagedropdown"></select>
</div>
<div>
<a href="javascript:sorter.showall()">view all</a>
</div>
</div>
<div id="tablelocation">
<div>
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entries Per Page</span>
</div>
<div class="page">Page <span id="currentpage"></span> of <span id="totalpages"></span></div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true,
size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:1,
sortdir:1,
columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
init:true
});
</script>
Ce code doit être inséré dans toutes les pages appartenant au groupe Tableau.
J'ai essayé plusieurs choses :
- J'ai essayé de créer Tableau.GroupHeader et Talbeau.GroupFooter. Mais je n'ai pas trouvé comment autoriser le code HTML seulement pour ces deux pages, protégées par mot de passe.
J'ai installé la recette Enable HTML dans le Cookbook. Elle permet d'autoriser certaines balises mais pour toutes les pages du site. - J'ai essayé de trouver un moyen en HTML ou en PHP d'ajouter le code souhaité dans le bon fichier pour qu'il apparaisse dans toutes les pages du groupe Tableau, grâce à une fonction. Le code suivant est automatiquement ajouté à toute nouvelle page : <div id='wikitext'> </div>. Il faudrait insérer le code HTML à l'intérieur de ce div.
Je n'ai pas trouvé la solution, quel fichier faut-il modifier ?
Mais il y a aussi un autre problème parce que la création d'un tableau en wiki ajoute automatiquement les balises <table> et </table>. Or les balises d'entête <th>, qui viennent après la balise <table>, doivent contenir du code HTML : <th><h3>Produit</h3></th> pour que le script fonctionne et que le tableau devienne triable (voir le code ci-dessus).
Ainsi, une solution serait que seules les balises <tr> et <td> soient ajoutées lors de l'enregistrement de la page et pas les balises <table> et </table>.
Une autre solution serait de trouver un moyen de parvenir à ce code après transformation en html : <th><h3>Produit</h3></th>.
Voici l'adresse du site : http://comparonslesprix.free.fr/pmwiki/
C'est un site de comparaison de prix par/pour les consommateurs.
Je vous remercie par avance pour votre aide !
Cordialement,
-
Alky
- Messages : 3