目次

Version 3, last updated by mads379 at Nov 02 04:28 UTC

About

The TableSorter Widget is a wrapper for the jQuery Plugin TableSorter.

How to use it

The code

Lets start with some example code

import _root_.scala.xml.{NodeSeq, Text}
import _root_.net.liftweb.http.SHtml._
import _root_.net.liftweb.util.Helpers._
import _root_.net.liftweb.widgets.tablesorter.{TableSorter, DisableSorting, Sorting, Sorter}

class TableSorterDemo {
  
  val headers = (0, DisableSorting()) :: (3,Sorter("currency")) :: Nil
  val sortList = (3,Sorting.DSC) :: Nil
  
  val options = TableSorter.options(headers,sortList)
  
  def render(xhtml: NodeSeq) :NodeSeq = {
    TableSorter("#myTable", options)
  }  
}

The most import bit is this TableSorter("#myTable2", options) which will convert the DOM Node that matches the the CSS selector ‘#myTable’ into a sortable table. So the first argument is a CSS selector and the second is your configuration of the table. You can leave out the second argument if you just want the default configuration.

You create the configuration of the table by calling the TableSorter.options with a List of (int x TableSorterOption) and a List of (int x Sorting). Here’s what the headers and sortList configure.

The headers is a List of (int x TableSorterOption) which tells the table how it should sort the data in that column. You can disable sorting of that column by using DisableSorting() or you can specify a sorter using the Sorter class. Some of the possible options for the Sorter are: “shortDate, usLongDate, percent, isoDate, url, ipAddress, currency, digit, text, shortDate, time, metadata” but check the official plugin site for more information.

The sortList is a List of (int x Sorting) tuples which decides what the default sorting of the table should be (Ascending or Descending). You could add another tuple to the list and that would be the secondary sorting.

The Markup

The widgets will only work if you have a table with a <thead> tag. The following is an example from test source of the lift-widgets project.

<lift:TableSorterDemo />
<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Email</th>
            <th>Due</th>
            <th>Web Site</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Smith</td>
            <td>John</td>
            <td>jsmith@gmail.com</td>
            <td>$50.00</td>
            <td>http://www.jsmith.com</td>
        </tr>
        <tr>
            <td>Bach</td>
            <td>Frank</td>
            <td>fbach@yahoo.com</td>
            <td>$50.00</td>
            <td>http://www.frank.com</td>
        </tr>
        <tr>
            <td>Doe</td>
            <td>Jason</td>
            <td>jdoe@hotmail.com</td>
            <td>$100.00</td>
            <td>http://www.jdoe.com</td>
        </tr>
        <tr>
            <td>Conway</td>
            <td>Tim</td>
            <td>tconway@earthlink.net</td>
            <td>$50.00</td>
            <td>http://www.timconway.com</td>
        </tr>
    </tbody>
</table>

Table Sort a table on the go

By using TableSorter.jsRender("#myTable3", options).cmd you get a JsCmd that will convert a regular table to a TableSorter table on the fly.

Here’s an example of how to use it in a snippet

 def demo3(xhtml: NodeSeq) :NodeSeq = {
    bind("demo3", xhtml, 
      "btn" -> a( () => TableSorter.jsRender("#myTable3", options).cmd, Text("TableSorter that table!") ))
  }

This will convert a tag like this <demo3:btn /> into an ajax link which will convert the table that match the CSS selector ‘#myTable3’ into a sortable table.