[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