注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天高云淡的博客

A bad beginning makes a bad ending.

 
 
 

日志

 
 

tablesorter: Flexible client-side table sorting  

2010-10-25 11:01:44|  分类: javascript + jqu |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Author: Christian Bach
Version: 2.0.5 (changelog)
Licence: Dual licensed under MIT or GPL licenses.

Update! New version!, and the tablesorter docs are now available in russian, head over to tablesorter.ru

Helping out! If you like tablesorter and you're feeling generous, take a look at my Amazon Wish List

Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com.


Contents
Introduction
Demo
Getting started
Examples
Configuration
Download
Compatibility
Support
Credits

Introduction

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:


Multi-column sorting
Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily

Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
Extensibility via widget system
Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
Small code size

Demo
First Name Last Name Age Total Discount Difference Date
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
Bruce Almighty 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM
Bruce Evans 22 $13.19 11% 0 Jan 18, 2007 9:12 AM

TIP! Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!


Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the
<head>
tag of your HTML document:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<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> 
    

Start by telling tablesorter to sort your table when the document is loaded:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
    

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 
    

NOTE! tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see Examples


Examples

These examples will show what's possible with tablesorter. You need Javascript enabled to run these samples, just like you and your users will need Javascript enabled to use tablesorter.

Basic
Set a initial sorting order using options
Dealing with digits!
Disable header using options
Sort table using a link outside the table
Force a default sorting order
Change the default multi-sorting key
Metadata - setting inline options
Set a initial sorting order using metadata
Disable header using metadata
Setting column parser using metadata
Advanced
Triggers sortEnd and sortStart(Displaying sorting progress)
Appending table data with ajax
Initializing tablesorter on a empty table
Dealing with markup inside cells
Extending default options
Enableing debug mode
Parser, writing your own
Widgets, writing your own
Companion plugins
Pager plugin

Configuration

tablesorter has many options you can pass in at initialization to achieve different effects:

Property Type Default Description Link
sortList Array null An array of instructions for per-column sorting and direction in the format:
[[columnIndex, sortDirection], ... ]
where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like:
[[0,0],[1,0]]
Example
sortMultiSortKey String shiftKey The key used to select more than one column for multi-column sorting. Defaults to the shift key. Other options might be ctrlKey, altKey.
Reference: http://developer.mozilla.org/en/docs/DOM:event#Properties
Example
textExtraction String Or Function simple Defines which method is used to extract data from a table cell for sorting. Built-in options include "simple" and "complex". Use complex if you have data marked up inside of a table cell like:
<td><strong><em>123 Main Street</em></strong></td>
. Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like:
var myTextExtraction = function(node)  
{  
    // extract data from markup and return it  
    return node.childNodes[0].childNodes[0].innerHTML; 

$(document).ready(function() 
    { 
        $("#myTable").tableSorter( {textExtraction: myTextExtraction} ); 
    } 
); 
tablesorter will pass a jQuery object containing the contents of the current cell for you to parse and return. Thanks to Josh Nathanson for the examples.
Example
headers Object null An object of instructions for per-column controls in the format:
headers: { 0: { option: setting }, ... }
For example, to disable sorting on the first two columns of a table:
headers: { 0: { sorter: false}, 1: {sorter: false} }
Example
sortForce Array null Use to add an additional forced sort that will be appended to the dynamic selections by the user. For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort. Example
widthFixed Boolean false Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work. Example
cancelSelection Boolean true Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
cssHeader String "header" The CSS style used to style the header in its unsorted state. Example from the blue skin:
th.header { 
    background-image: url(../img/small.gif);     
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding-left: 20px; 
    border-right: 1px solid #dad9c7; 
    margin-left: -1px; 

cssAsc String "headerSortUp" The CSS style used to style the header when sorting ascending. Example from the blue skin:
th.headerSortUp { 
    background-image: url(../img/small_asc.gif); 
    background-color: #3399FF; 

cssDesc String "headerSortDown" The CSS style used to style the header when sorting descending. Example from the blue skin:
th.headerSortDown { 
    background-image: url(../img/small_desc.gif); 
    background-color: #3399FF; 

debug Boolean false Boolean flag indicating if tablesorter should display debuging information usefull for development. Example

Download

Full release - Plugin, Documentation, Add-ons, Themes jquery.tablesorter.zip

Pick n choose - Place at least the required files in a directory on your webserver that is accessible to a web browser. Record this location.

Required:
jQuery (1.2.1 or higher)
jquery.tablesorter.min.js (12kb, Minified for production)
Optional/Add-Ons:
jQuery Metadata 2.1 (3,7kb Required for setting inline options)

jquery.tablesorter.js (17,7kb, for development)
jquery.tablesorter.pager.js (3,6kb, tablesorter pagination plugin)
Themes:
Green Skin - Images and CSS styles for green themed headers
Blue Skin - Images and CSS styles for blue themed headers (as seen in the examples)

Browser Compatibility

tablesorter has been tested successfully in the following browsers with Javascript enabled:


Firefox 2+
Internet Explorer 6+
Safari 2+
Opera 9+
Konqueror

jQuery Browser Compatibility


Support

Support is available through the jQuery Mailing List.

Access to the jQuery Mailing List is also available through Nabble Forums.


Credits

Written by Christian Bach.

Documentation written by Brian Ghidinelli, based on Mike Alsup's great documention.

John Resig for the fantastic jQuery

  评论这张
 
阅读(1334)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018