HowTo integrate the jQuery TableSorter

From Lift

Jump to: navigation, search

Currently a Work in progress.

Steps to integrate jQuery TableSorter and lift.
TableSorter Home
Example image

- changes to the view, since TableSorter needs thead and tbody.
- add the jQuery scripts (generally in templates-hidden/default.html)
- init the TableSorter

Generate the thead and tbody in the snippet like so: 

def ProjectList: NodeSeq = { 
    Project.find() match {
    case Empty => Project.create.code("DEF001").name("Default Project").save
    case _ =>
    }   
     <head> 
       <script type="text/javascript" charset="utf-8"> 
         <![CDATA[ 
         jQuery(function($){ 
           // tablesorter call - maybe here? 
           $("#example").tablesorter({sortList:[[0,0]], widgets:['zebra']}); 
         }); 
         ]]> 
       </script> 
     <head> 
    <thead><tr>{Project.htmlHeaders}<th>View</th><th>Edit</th><th>Delete</th></tr></thead><tbody> {
    Project.findAll(OrderBy(Project.id, true)).flatMap(u =>  
      <tr>{u.htmlLine}
        <td>{link("/timesheets/projects/view", () => selectedProject(u), Text("View"))}</td>
        <td>{link("/timesheets/projects/edit", () => selectedProject(u), Text("Edit"))}</td>
        <td>{link("/timesheets/projects/delete", () => selectedProject(u), Text("Delete"))}</td>
      </tr>)}</tbody>
  }



Html changes: 

<lift:surround with="default" at="content">
<a href='/timesheets/clients/add'>Add a Client</a>
<table id="example" class="tablesorter" width="90%">
<lift:snippet type="SheetUtil:ClientList"/>
</table>
</lift:surround>
Retrieved from "http://liftweb.net/index.php/HowTo_integrate_the_jQuery_TableSorter"
Personal tools