[pmwiki-users] TinyTableV3 in PmWiki
ximunity
ximunity at googlemail.com
Tue Dec 29 15:30:17 CST 2009
Hello,
I'm trying to combine PmWiki with the TinyTable V3 in order to make sortable
tables.
http://www.leigeber.com/2009/11/advanced-javascript-table-sorter/
But I need to insert HTML code before and after the rows added by the
visitors.
It would be something like that before the datas inserted by the visitors :
<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>Phone</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>
And it would be something like that after :
</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>
I tried several things :
- I tried to create Tableau.GroupHeader and Talbeau.GroupFooter . The
previous HTML code has to be on every page of the group Tableau. But I
didn't find the way to allow the HTML code only for these two pages. These
two pages are protected by password in writing, only the administrator can
modify them.
- I tried to find a way in html or PHP to add the previous HTML code in
the appropriate file. I was thinking to create a function to write the HTML
code if the group is "Tableau" before and after the visitor entry. This text
is automatically added to a new page : <div id='wikitext'> </div> . A
solution would be to add the HTML code inside this div. However I didn't
find the way to do it. Which file should be modified ?
But there is also another problem, because a table is always created with
the tags <table> and </table>.
And I need to add <h3> tags for the first row : <th><h3>Name</h3></th>...
otherwise the script doesn't work and this is not possible in the wiki.
Thus, a solution would be to add only <tr> and <td> tags but not <table> and
</table>
when the table is transformed in HTML, when the page is saved.
This is the adresse of the site : http://comparonslesprix.free.fr/pmwiki/
It's a site of prices comparison for/by consummers.
I hope to have been clear, although my english is not very good ;)
Thank you in advance for your help !
Arnaud
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.pmichaud.com/pipermail/pmwiki-users/attachments/20091229/e2fd1ec2/attachment.html
More information about the pmwiki-users
mailing list