jQuery.tablesorter html表格排序插件
使用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
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 theonRenderHeader 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
|
---|
jQuery.tablesorter html表格排序插件相关推荐
- jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- html用排序列表的方式添加,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
- html怎么自动导入数据并排序,jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
- 在Web页面实现表格排序功能:jQuery、Vue等思路分析
参考思路 01 jQuery <Jquery对Table表格排序(方法一)> https://blog.csdn.net/wdfscp/article/details/8373311 主要 ...
- jQuery起点教程之有序化插件实例
jQuery起点教程之有序化插件实例是一篇使用jquery的tablesorter插件来实现一些功能效果的教程,大家可以认真学习一下.Sort me将我有序化:使用tablesorter插件进行表格排 ...
- jQuery表格排序总成-tablesorter
一个.进口单证 <script type="text/javascript" src="js/jquery.js"></script> ...
- jQuery表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
最新文章
- unity项目警告之 LF CRLF问题
- 每日一皮:公司来了个程序员鼓励师...
- 罗格斯大学电子与计算机系排名,罗格斯大学美国大学排名及专业排名汇总(USNEWS美国大学排名版)...
- asp.net 学习交流群 130017551
- Python 调试冷知识
- 二维码批量生成下载工具
- ios- uitextview的详细使用方法
- 一个日志框架的开源,有些不错的创意。
- 如何使用ArcMap将Excel数据转换为shp数据
- 使用STM32固件库开发GD32 汇总
- Python_072205_创建一个类方法记录车的品牌mark、颜色color、价格price、速度speed等特征, 并实现增加车辆信息、显示车辆全部信息的功能。
- 华为设备配置备份,配置文件导入导出,设备配置恢复,设备镜像上传
- 性能测试实战脚本—服务器端性能测试的通用脚本
- BZOJ4319: cerc2008 Suffix reconstruction Suffix Array 的理解
- mysql 黑名单_51ak带你看MYSQL5.7源码4:实现SQL黑名单功能
- 计算机桌面任务栏怎样显示输入法,计算机中任务栏的输入法无法切换怎么处理...
- 2019-2021届蓝桥杯——java真题集锦
- MS Sql数据库常用语句
- 代码精进之路:从码农到工匠读书笔记
- SR-IOV的简单理解
热门文章
- 如何使用ABBYY FineReader 12将JPEG文件转换成Word文档
- [python爬虫] Selenium常见元素定位方法和操作的学习介绍(转载)
- 黄页前台联动菜单修改时不能显示,要重新选择|没样式
- Origin null is not allowed by Access-Control-Allow-Origin 解决方法
- 网络管理员的爱情,不解释...
- 通过IGRP路由协议实现非等值带宽的负载平衡
- Oracle的rownum原理和使用(整理几个达人的帖子)
- 页面中color颜色值_计算机毕业设计中实现一个简易美观的登录界面
- 计算机配置里 无 管理模板,组策略里打开后没有管理模板
- NetBeans eclipse比較