How to make a table with sortable colmns?
Hello all, i am using the following to get some data from Database and show them in a table: <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-7"> </head> <style type="text/css" media="screen"><!-- @import url(/plone.css); --></style> <style type="text/css" media="screen"><!-- @import url(/ploneColumns.css); --></style> <style type="text/css" media="all"><!-- @import url(/ploneCustom.css); --></style> <dtml-var standard_html_header> <table id="sortable" class="listing" summary="Content listing" cellpadding="0" cellspacing="0"> <thead> <dtml-in expr="GetHeader(sysDSN=sysDSN, usr=usr, mypass=mypass, sTable=sTable)"> <th class=""> <dtml-in sequence-item> <dtml-var sequence-item> </dtml-in> </th> </dtml-in> </thead> <dtml-in expr="GetData(sysDSN=sysDSN, usr=usr, mypass=mypass, sTable=sTable)"> <dtml-if sequence-even> <tr class="even"> <dtml-else> <tr class="odd"> </dtml-if> <dtml-in sequence-item> <!-- <td <input type="checkbox" title=<dtml-var sequence-item> ></td>--> <td><dtml-var sequence-item></td> </dtml-in> </tr> </dtml-in> </table> <dtml-var standard_html_footer> But how can i tell the table to sort the column i click on just like plone does with the members list? Thanks in advance Thomas Apostolou ___________________________________________________________ Χρησιμοποιείτε Yahoo!; Βαρεθήκατε τα ενοχλητικά μηνύματα (spam); Το Yahoo! Mail διαθέτει την καλύτερη δυνατή προστασία κατά των ενοχλητικών μηνυμάτων http://login.yahoo.com/config/mail?.intl=gr
There is the "sort" attribute of the dtml-in tag. You'll have to read the DTML Reference for more info on that. However, it was a little iffy for me once, and now I do something like this: 1. Setup table header with a response back to sort that column. 2. Change the ZSQL method to use that value dynamically. Maybe not the best/most efficient way, but it works great for my use. So on your table header, either add forms with submit links, or add a link with query strings. I usually add a query string, so my table header looks like this: <tr> <td><a href="<dtml-var URL0>?sortby=colA">Col A</td> <td><a href="<dtml-var URL0>?sortby=colB">Col B</td> </tr> Then in your ZSQL method, setup an argument for "sortby". Make sure you name colA or colB exactly like your table columns. In the method, I create a dtml-if at the end of the query: Select ........ <dtml-if "_.has_key('sortby')"> Order by <dtml-var sortby>, LastName <dtml-else> Order by LastName </dtml-if> OR Select ........ <dtml-if "_.has_key('sortby')"> Order by <dtml-var sortby> </dtml-if> I have LastName there because I always wanted that column to be a second sort. You obviously would have a different one. There's probably a little more to this I am not thinking of at the moment, but I hope it helps you towards your goal. You could also get real fancy and add ascending and descending to the mix. (click to sort, click again to sort desc) Greg On 10/7/05, Thomas Apostolou <tomatbiz-tominfo@yahoo.co.uk> wrote:
Hello all, i am using the following to get some data from Database and show them in a table:
<head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-7"> </head> <style type="text/css" media="screen"><!-- @import url(/plone.css); --></style> <style type="text/css" media="screen"><!-- @import url(/ploneColumns.css); --></style> <style type="text/css" media="all"><!-- @import url(/ploneCustom.css); --></style> <dtml-var standard_html_header> <table id="sortable" class="listing" summary="Content listing" cellpadding="0" cellspacing="0"> <thead> <dtml-in expr="GetHeader(sysDSN=sysDSN, usr=usr, mypass=mypass, sTable=sTable)"> <th class=""> <dtml-in sequence-item> <dtml-var sequence-item> </dtml-in> </th> </dtml-in> </thead> <dtml-in expr="GetData(sysDSN=sysDSN, usr=usr, mypass=mypass, sTable=sTable)"> <dtml-if sequence-even> <tr class="even"> <dtml-else> <tr class="odd"> </dtml-if> <dtml-in sequence-item> <!-- <td <input type="checkbox" title=<dtml-var sequence-item> ></td>--> <td><dtml-var sequence-item></td> </dtml-in> </tr> </dtml-in> </table> <dtml-var standard_html_footer>
But how can i tell the table to sort the column i click on just like plone does with the members list?
Thanks in advance
Thomas Apostolou
___________________________________________________________ Χρησιμοποιείτε Yahoo!; Βαρεθήκατε τα ενοχλητικά μηνύματα (spam); Το Yahoo! Mail διαθέτει την καλύτερη δυνατή προστασία κατά των ενοχλητικών μηνυμάτων http://login.yahoo.com/config/mail?.intl=gr
_______________________________________________ Zope maillist - Zope@zope.org http://mail.zope.org/mailman/listinfo/zope ** No cross posts or HTML encoding! ** (Related lists - http://mail.zope.org/mailman/listinfo/zope-announce http://mail.zope.org/mailman/listinfo/zope-dev )
-- Greg Fischer 1st Byte Solutions http://www.1stbyte.com
--On 7. Oktober 2005 14:35:00 +0100 Thomas Apostolou <tomatbiz-tominfo@yahoo.co.uk> wrote:
But how can i tell the table to sort the column i click on just like plone does with the members list?
I think he was asking for a client-side-only solution. Google for "sortable table". This will link you to some JS based solutions. The solution from <http://www.kryogenix.org/code/browser/sorttable/> is working for us. Especially you can hook your own comparison methods when you are dealing with custom types to be sorted (european dates, etc.) -aj
Thank you all. You have helped ance again. after reading the article above i understood that apart from writing <table id="sortable" class="listing" summary="Content listing" cellpadding="0" cellspacing="0"> i sould also import this 2 js files wich makes my page understand what class="listing" means in order to behave like i would expect it to. <script type="text/javascript" src="./plone_javascript_variables.js"> <script type="text/javascript" src="./plone_javascripts.js"> Andreas Jung <lists@andreas-jung.com> wrote: --On 7. Oktober 2005 14:35:00 +0100 Thomas Apostolou wrote:
But how can i tell the table to sort the column i click on just like plone does with the members list?
I think he was asking for a client-side-only solution. Google for "sortable table". This will link you to some JS based solutions. The solution from is working for us. Especially you can hook your own comparison methods when you are dealing with custom types to be sorted (european dates, etc.) -aj --------------------------------- Χρησιμοποιείτε Yahoo! Βαρεθήκατε τα ενοχλητικά μηνύ ματα (spam); Το Yahoo! Mail διαθέτει την καλύτερη δυνατή προστασία κατά των ενοχλητικών μηνυμάτων http://login.yahoo.com/config/mail?.intl=gr
participants (3)
-
Andreas Jung -
Greg Fischer -
Thomas Apostolou