英文原文:[url]http://kryogenix.org/code/browser/sorttable/
[/url]
sorttable: Make all your tables sortable
Now, how to use it. To make a table of your choice sortable, there are three steps:
Download the Javascript library
Include the Javascript library, by putting a link to it in the HEAD of your page, like so:
<script src="sorttable.js"></script>
[/script]
Mark your table as a sortable one by giving it a class of "sortable":
<table class="sortable">
Note that the library's JavaScript file is called sorttable (two Ts), but the class you add to the table is sortable (one T).
And that's all you need. Your table will now have column sorting available by clicking the headers. For niceness, you might want to add the following styles to your stylesheet, or make up some of your own based on this:
/* Sortable tables */
table.sortable thead {
background-color:#eee;
color:#666666;
font-weight: bold;
cursor: default;
}
This is version 2 of sorttable, released April 2007. If you're using the old version, you may find it useful to update; v2 has numerous new features and should be completely backwards compatible.
--------------------------------------------------------------------------------
Advanced usage
You probably don't need the bits here. Sorttable is designed to require no configuration, no fiddling around. Just take it and use it. If you need it to do more than it does by default, then come back here and read this part.
How do I make my "totals" row stay at the bottom of my table?
How do I sort some data in a format that sorttable doesn't understand?
What do I do if sorttable isn't sorting my data the way I'd expect it to?
Can sorttable do a stable sort?
How do I make some columns not be sortable?
Can sorttable sort a table as soon as the page loads, without requiring the user to click?
How do I make sorttable sort columns in descending order first rather than ascending order?
What's new in version 2 of sorttable?
Can I use sorttable in a commercial product? On a commercial website? What licencing terms is it available under?
I love sorttable so much that I want to donate some money to you even though I don't have to. Can I?
Totals rows
If you have a "totals" row at the bottom of your table that you want to stay at the bottom of your table (and not get sorted), then add it to a <tfoot> section in your table (which is what you should be doing anyway, according to the HTML spec). So, your table should look like this:
<table class="sortable">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Jan Molby</td><td>£12,000</td></tr>
<tr><td>Steve Nicol</td><td>£8,500</td></tr>
<tr><td>Steve McMahon</td><td>£9,200</td></tr>
<tr><td>John Barnes</td><td>£15,300</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
Note how sorting the table leaves the TOTAL row at the bottom.
Person Monthly pay
Steve Nicol £8,500
Steve McMahon £9,200
John Barnes £15,300
Jan Molby £12,000
TOTAL £45,000
Using custom sort keys
You may have some data which does go in an order but isn't identified by sorttable. The way to fix this problem is to use custom sort keys. Take, for example, a column of spelled out numbers. Ordinarily, sorttable wouldn't work here; it will treat the spelled-out numbers as strings, and so would sort the numbers in alphabetical order, i.e., five, four, one, three, two. To get around this, you can specify on a cell in your table a sorttable_customkey attribute, and sorttable will use the contents of that attribute instead of the text in the cell itself when sorting the table. So, for example, your table might look like this:
<table class="sortable">
<tr><th>Number (spelled)</th><th>Person</th></tr>
<tr><td sorttable_customkey="2">two</td><td>Jan</td></tr>
<tr><td sorttable_customkey="3">three</td><td>Bruce</td></tr>
<tr><td sorttable_customkey="1">one</td><td>Steve</td></tr>
</table>
Note that clicking on the "Number (spelled)" column in the table below sorts it in the correct one,two,three order. Number (spelled) Person
one Steve
two Jan
three Bruce
You can fix practically any problem you have with sorttable's automatic column typing by specifying custom sort keys.
Manually specifying a column's type
Sorttable works out the type of your columns in order to work out how to sort them (numbers sort differently than letters, for example). Occasionally, it might get it wrong. If so, you can explicitly specify a type for a column, which will override sorttable's assessment. To specify a type, add a class of sorttable_columntype to the header row of that column. Available column types are numeric, alpha, ddmm, and mmdd. The latter two are for dates, but are not likely to be useful because if sorttable fails to automatically identify a date then the sort won't work anyway.
So, for example, if you have a "part number" column which you want to be treated as if it were numeric, then you might do your table like this:
<table class="sortable">
<tr>
<th class="sorttable_numeric">Part number</th><th>Part name</th>
</tr>
<tr>
<td>111-A5</td><td>Three-eighths Gripley</td>
</tr>
<tr>
<td>31337-H4X0R</td><td>Computer system intrusion toolkit</td>
</tr>
</table>
Remember: you probably do not need to do this. It is unlikely that you'll need to "force" sorttable to recognise a column type. You may also want to investigate using custom sortkeys, above, as a better way of achieving your goals.
Stable sorting
Sorttable, by default, does an unstable sort. This means that it does not maintain the order of rows where those rows have the same key in the sorted column. Wikipedia has more on stable sorting. If this is a problem, and you need the sort to be stable, you can do it by making a tiny edit to sorttable.js. Edit the file and find the lines:
/* If you want a stable sort, uncomment the following line */
//sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
/* and comment out this one */
row_array.sort(this.sorttable_sortfunction);and change them so the shaker_sort line is uncommented instead:
sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
//row_array.sort(this.sorttable_sortfunction);The sort will now be stable. However, it will be considerably slower (the stable sorting can take eight times as long as the unstable sort), which is why it isn't enabled by default.
Making some columns unsortable
If you'd like some column headers to not be clickable, meaning that your users won't be able to resort the table by those columns, then add class="sorttable_nosort" to the <th> column header. Observe how the "number of legs" column here isn't sortable.
Name 6 Team Number of legs
Ardiles, Ossie Tottenham Hotspur 2
Charlie Nicholas Arsenal 2
Hughes, Mark Manchester Utd 2
Molby, Jan Liverpool 2
Nicol, Steve Liverpool 2
Sorting the table when the page is loaded
Lots of people ask, "how do I make sorttable sort the table the first time the page is loaded?" The answer is: you don't. Sorttable is about changing the HTML that is served from your server without a page refresh. When the page is first served from the server, you have to incur the wait for it to be served anyway. So, if you want the table sorted when a page is first displayed, serve the table in sorted order. Tables often come out of a database; get the data from the database in a sorted order with an ORDER BY clause in your SQL. Any solution which involves you running sorttable as soon as the page loads (i.e., without user input) is a wrong solution.
Sort in descending order first
Making sorttable sort your columns in descending order first rather than ascending order requires editing sorttable.js. Find the line:
row_array.sort(this.sorttable_sortfunction);and after it, add a new line:
row_array.reverse();Changes from sorttable v1
Sorttable has changed quite a lot in this new version 2. Please read the release announcement for more details of what's changed and who is to be thanked. If for some reason you need the original version 1 of sorttable you can download it from sorttable_v1.js along with the original instructions.
Licencing
Sorttable, like all my DOM scripts, is under the X11 licence, which basically means you can do what you want with it, including using it at work or in a commercial setting or product. If you're not sure, or you have other questions, please contact me for details.
Can I give you money for sorttable? I really like it
You don't have to. I believe in Free Software; writing this and seeing people use it is its own reward. Of course, if you're determined to give me money then I'm not going to stop you. You can send money to my PayPal account with the button below.
分享到:
相关推荐
sorttable表格排序
博文链接:https://guoyankun.iteye.com/blog/194780
功能强大的javascript表格排序,可以设定排序规则,设定哪些列排序,哪些列不排序。运行速度快。两部操作就搞定,使用方便简单!解决服务器端数据库排序的压力!
可以实现表格排序和表头浮动效果的JavaScript脚本
前端sorttable拖拽排序
原生js sortTable对表格进行排列顺序表格递增顺序排列
对网页中的table中的数据排序,目前只能支持IE,对firefox和Opera not surpport
sorttable.js 排序-方便实用的js排序,只需简单操作即可见到效果 var stIsIE = /*@cc_on!@*/false; sorttable = { init: function() { // quit if this function has already been called if (arguments...
前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了表头浮动效果及一些小功能。
表格排序插件jquery.tableSort.js:http://blog.csdn.net/libin_1/article/details/50761057
NULL 博文链接:https://201201051654.iteye.com/blog/1430087
NULL 博文链接:https://donald-draper.iteye.com/blog/2361740
方便实用的js排序,只需简单操作即可见到效果
本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考,具体如下: 表格前端按列排序 依赖jQuery(本例使用jQuery-1.8.2) 1.初始化方法 (function($){ //插件 $.extend($,{ //命名空间 sortTable:...
jquery.sorttable.js库是用于html table 排序插件库
自己独立研究2天结晶,本项目利用Jquery sorttable插件实现,可以实现任意拖拽并保存数据库,思路简单易学,初始化时展示拖拽后的结果。本项目附有数据库,直接附加便可运行操作。如有疑问请联系1096012618
移动端列表长按后,然后可以上下拖动进行排序,主要使用了基于h5 sortTable,然后使用了touch相关事件实现,仅支持移动端,支持安卓和苹果。