jQuery.tablesorter html表格排序插件

最新推荐文章于 2021-03-31 19:47:52 发布

whereismatrix

最新推荐文章于 2021-03-31 19:47:52 发布

阅读量2.1k

点赞数

分类专栏： jQuery tablesort 文章标签： jQuery tablesort

jQuery 同时被 2 个专栏收录

4 篇文章

订阅专栏

tablesort

1 篇文章

订阅专栏

本文介绍如何使用jQuery tablesorter插件实现HTML表格的排序功能。首先需要引入jQuery和tablesorter脚本，然后设置表格样式并指定特定的CSS类，最后添加jQuery代码启用表格排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery tablesort实现html表格方法:

1. 下载jQuery和tablesort脚本，并在html中引用该脚本文件：

<script type="text/javascript" src="../jquery.tablesorter.js"></script>

2. 格式化需要排序的html表格：

a. 给需要排序的表格指定CCS类：class="sorttable"

b. 使用thead和tbody标签来标记表格头和表格正文

c. 在表格头thead中需要使用th标签定义表头

3. 添加jQuery代码，启用html表格排序：

在body中对在第二步中指定的排序表格css类调用tablesorter()函数：

<script type="text/javascript">
    $(document).ready(function() {
        $(".sorttable").tablesorter();
    });
</script>

通过上面的3步，jQuery tablesort就可以实现对html表格的排序

===================

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

Configuration

tablesorter has many options you can pass in at initialization to achieve different effects
TIP! Click on the link in the property column to reveal full details (or toggle| show| hide all) or double click to update the browser location.

Property	Type	Default	Description	Link
Property	Type	Default	Description	Link
cancelSelection	Boolean	true	Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
cssAsc	String	""	Additional CSS class applied to style the header with a ascending sort (v2.11).
cssChildRow	String	"tablesorter-childRow"	Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row. Previous default was `"expand-child"` (Modified v2.4).	1 2
cssDesc	String	""	Additional CSS class applied to style the header with a descending sort (v2.11).
cssHeader	String	""	Additional CSS class applied to style the headers (v2.11).
cssHeaderRow	String	""	Additional CSS class applied to style the header row (v2.11).
cssIcon	String	"tablesorter-icon"	The CSS style used to style the header cell icon (modified v2.7).
cssIconAsc	String	""	The CSS style added to the header cell icon when the column has an ascending sort (v2.18.3).
cssIconDesc	String	""	The CSS style used to style the header cell icon when the column has a descending sort (v2.18.3)
cssIconNone	String	""	The CSS style used to style the header cell icon when the column does not have a sort applied (v2.18.3)
cssIgnoreRow	String	"tablesorter-ignoreRow"	Class name to add to a table header row if you want all cells within this row to be ignored (v2.18.4).
cssInfoBlock	String	"tablesorter-infoOnly"	All tbodies with this class name will not have its contents sorted. (v2.2).
cssNone	String	""	Additional CSS class applied to style the header when no sort is applied (v2.15).
cssNoSort	String	"tablesorter-noSort"	Class name added to element inside header. Clicking on that element, or any elements within it won't cause a sort. (New v2.20.0).
cssProcessing	String	""	Additional CSS class applied to style the header cell while it is being sorted or filtered (v2.4; v2.11).
dateFormat	String	"mmddyyyy"	Set the date format. Here are the available options. (Modified v2.0.23).	Example
debug	Boolean	false	Boolean flag indicating if tablesorter should display debuging information useful for development.	Example
delayInit	Boolean	false	Setting this option to true will delay parsing of all table cell data until the user initializes a sort. This speeds up the initialization process of very large tables, but the data still needs to be parsed, so the delay is still present upon initial sort.	Example
emptyTo	String	"bottom"	Option indicating how tablesorter should deal with empty table cells. (Modified v2.1.16, v2.16.2).	Example
headers	Object	null	An object of instructions for per-"header cell" controls in the format: `headers: { 0: { option: setting }, ... }` (v2.17.1) docs updated	1 2 3 4 5
headerTemplate	String	"{content}"	This is a template string which allows adding additional content to the header while it is being built (v2.7; v2.17.8).	Example
ignoreCase	Boolean	true	When true, text sorting will ignore the character case. If false, upper case characters will sort before lower case. (v2.2).
imgAttr	String	"alt"	Used by the image parser to grab the image attribute content (v2.17.5; moved to tablesorter core in v2.18.0; see `config.parsers`).
initialized	Function	null	This callback fires when tablesorter has completed initialization. (v2.2).
initWidgets	Boolean	true	Apply widgets after table initializes (v2.3.5).
namespace	String	undefined	This option should contain a unique namespace for each table; it is used when binding to event listeners (v2.15.7).
numberSorter	Function	null	Replace the default number sorting algorithm with a custom one using this option (v2.12).
onRenderHeader	Function	null	This function is called after content is to the TH tags (after the template is procressed and added). You can use this to modify the HTML in each header tag for additional styling (v2.18.0).	Example
onRenderTemplate	Function	null	This function is called after the template string has been built, but before the template string is applied to the header and before the`onRenderHeader` function is called (v2.7).	Example
resort	Boolean	true	When this option is `true` any applied sort on the table will be reapplied after an update method (New v2.19.0).
selectorHeaders	String	"> thead th, > thead td"	jQuery selectors used to find cells in the header.
selectorRemove	String	"tr.remove-me"	This CSS class name can be applied to all rows that are to be removed prior to triggering a table update. (v2.1).
selectorSort	String	"th, td"	jQuery selector of content within `selectorHeaders` that is clickable to trigger a sort (v2.4).	Example
serverSideSorting	Boolean	false	Set to `true` if the server is performing the sorting. The ui and events will still be used (v2.5.3).
showProcessing	Boolean	false	Show an indeterminate timer icon in the header when the table is sorted or filtered. Please note that due to javascript processing, the icon may not show as being animated. I'm looking into this further and would appreciate any feedback or suggestions with the coding (v2.4).	Example
sortAppend	Array	null	Use to add an additional forced sort that will be appended to the dynamic selections by the user.	Example
sortForce	Array	null	Use to add an additional forced sort that is prepended to `sortList`.	Example
sortInitialOrder	String	"asc"	This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are `"asc"` for Ascending or `"desc"` for Descending.	1 2
sortList	Array	null	Use to add an initial sort to the table.	Example
sortLocaleCompare	Boolean	false	Boolean flag indicating if certain accented characters within the table will be replaced with their equivalent characters. (Modified v2.2).	Example
sortMultiSortKey	String	"shiftKey"	The key used to select more than one column for multi-column sorting. Defaults to the `Shift` key. The other options are `"ctrlKey"` or `"altKey"`(reference).	Example
sortReset	Boolean	false	Setting this option to `true` will allow you to click on the table header a third time to reset the sort direction. (v2.0.27).	Example
sortResetKey	String	"ctrlKey"	The key used to reset sorting on the entire table. Defaults to the control key. The other options are `"shiftKey"` or `"altKey"` (reference).
sortRestart	Boolean	false	Setting this option to `true` will start the sort with the `sortInitialOrder` when clicking on a previously unsorted column. (v2.0.31).	Example
sortStable	Boolean	false	Setting this option to `true` and sorting two rows with exactly the same content, the original sort order is maintained (v2.14).
stringTo	String	"max"	A key word indicating how tablesorter should deal with text inside of numerically sorted columns. (v2.1.16).	Example
tabIndex	Boolean	true	Add a tabindex to the headers for keyboard accessibility; this was previously always applied (v2.14).
tableClass	String	""	Additional CSS class applied to style the table (v2.11).
textAttribute	String	"data-text"	This data-attribute can be added to any tbody cell and can contains alternate cell text (v2.16.0).
textExtraction	Multiple*	"basic"	Defines which method is used to extract data from a table cell for sorting (Updated v2.19.0)	Example
textSorter	Function	null	Replace the default sorting algorithm with a custom one using this option (v2.12) - NOTE The parameters have changed!!.	1 2
theme	String	"default"	This option will add a theme css class name to the table `"tablesorter-{theme}"` for styling (v2.4; v2.18.0).	Example
usNumberFormat	Boolean	true	Indicates how tablesorter should deal with a numerical format: (v2.1.3).	Example
widgetClass	String	'widget-{name}'	When the table has a class name that matches the template and a widget id that matches the `{name}`, the widget will automatically be added to the table (v2.18.0)
widgetOptions	Object	{ }	In version 2.1, all widget options have been moved into this option. This is a move to store all widget specific options in one place so as not to polute the main table options. All current widgets have been modified to use this new option. (v2.1).	Example
widgets	Array	[ ] (empty array)	Initialize widgets using this option ( e.g. `widgets : ['zebra']`, or custom widgets `widgets: ['zebra', 'myCustomWidget'];`, see this demo on how to write your own custom widget ).	Example
widthFixed	Boolean	false	Indicates if tablesorter should apply fixed percentage-based widths to the table columns (modified v2.4).	Example
Utility Options
data	Object, Array	undefined	Storage for processed table build widget data (array, object, string) (v2.11).	Example
dateRange	Numeric	50	Used by the two digit year parser to set the date range (v2.14).	Example
fixedUrl	String	undefined	This option was added to set a specific page when storing data using the `$.tablesorter.storage` code (v2.12).
Deprecated/Removed Options
cssAllowClicks	String		This option was removed! It has been replaced by cssNoSort which does the opposite of what this class name was supposed to do.
widgetColumns			This option is being deprecated! It has been replaced by `widgetOptions.columns`; but is still available for backwards compatibility.
widgetUitheme			This option is being deprecated! It has been replaced by `widgetOptions.uitheme`; but is still available for backwards compatibility.
widgetZebra			This option is being deprecated! It has been replaced by `widgetOptions.zebra`; but is still available for backwards compatibility.

Property	Type	Default	Description	Link