Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allow no thead #2

Merged
merged 3 commits into from

2 participants

@jasonrhodes

Made changes to how jQuery finds and populates the <th> elements and their click events, and how it finds and populates the <tbody> rows.

You can just search for <th> elements without looking inside of a <thead> element, to make them clickable. Then, if the this.$thead stored variable's length is 0, the rows variable can fallback to all <tr> elements that contain a <td> element (rather than a <th>).

This should keep the current functionality in tact while falling back for people whose table markup is slightly out of their control and thus can't use <thead>.

jasonrhodes added some commits
@jasonrhodes jasonrhodes Added a check to allow for the markup to not include a thead and tbod…
…y, if there is no thead then it tries to populate the rows variable with a collection of all tr elements that contain a td element
6fa9199
@jasonrhodes jasonrhodes Minified the changes using uglifyjs bf1d4ee
@kylefox
Owner

Looks great, thanks for the patch! Would you mind updating the README?

@jasonrhodes

Sure. I'll push them when they're ready.

@jasonrhodes

All done. I also have another small change that should allow the sort to accurately sort numbers, but I'll wait until this one gets pulled in to avoid Pull Request confusion. ;)

@kylefox kylefox merged commit 818e8be into kylefox:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 3, 2012
  1. @jasonrhodes

    Added a check to allow for the markup to not include a thead and tbod…

    jasonrhodes authored
    …y, if there is no thead then it tries to populate the rows variable with a collection of all tr elements that contain a td element
  2. @jasonrhodes
  3. @jasonrhodes
This page is out of date. Refresh to see the latest.
Showing with 14 additions and 11 deletions.
  1. +8 −1 README.md
  2. +5 −4 jquery.tablesort.js
  3. +1 −6 jquery.tablesort.min.js
View
9 README.md
@@ -19,7 +19,14 @@ Call the appropriate method on the table you want to make sortable:
The table will be sorted when the column headers are clicked.
-Your table must have `thead` and `tbody` elements, and should follow this general format:
+Your table should follow this general format:
+
+> Note: If you have access to the table markup, it's better to wrap your table rows
+in `<thead>` and `<tbody>` elements (see below), resulting in a slightly faster sort.
+>
+> If you can't use `<thead>`, the plugin will fall back by sorting all `<tr>` rows
+that contain a `<td>` element using jQuery's `.has()` method (ie, the header row,
+containing `<th>` elements, will remain at the top where it belongs).
<table>
View
9 jquery.tablesort.js
@@ -23,8 +23,9 @@ $(function() {
$.tablesort = function ($table, settings) {
var self = this;
this.$table = $table;
+ this.$thead = this.$table.find('thead');
this.settings = $.extend({}, $.tablesort.defaults, settings);
- this.$table.find('thead th').bind('click.tablesort', function() {
+ this.$table.find('th').bind('click.tablesort', function() {
self.sort($(this));
});
this.index = null;
@@ -38,7 +39,7 @@ $(function() {
var start = new Date(),
self = this,
table = this.$table,
- rows = table.find('tbody tr'),
+ rows = this.$thead.length > 0 ? table.find('tbody tr') : table.find('tr').has('td'),
aRow,
bRow,
aIndex,
@@ -48,7 +49,7 @@ $(function() {
if(rows.length === 0)
return;
- self.$table.find('thead th').removeClass(self.settings.asc + ' ' + self.settings.desc);
+ self.$table.find('th').removeClass(self.settings.asc + ' ' + self.settings.desc);
this.index = th.index();
this.$th = th;
@@ -117,7 +118,7 @@ $(function() {
},
destroy: function() {
- this.$table.find('thead th').unbind('click.tablesort');
+ this.$table.find('th').unbind('click.tablesort');
this.$table.data('tablesort', null);
return null;
}
View
7 jquery.tablesort.min.js
@@ -2,9 +2,4 @@
A simple, lightweight jQuery plugin for creating sortable tables.
https://github.com/kylefox/jquery-tablesort
Version 0.0.1
-*/
-$(function(){var $=window.jQuery;function sortValueForCell(th,td,sorter){if(th.data().sortBy){var sortBy=th.data().sortBy;return typeof sortBy==="function"?sortBy(th,td,sorter):sortBy}if(td.data().sortValue)return td.data().sortValue;else return td.text()}$.tablesort=function($table,settings){var self=this;this.$table=$table;this.settings=$.extend({},$.tablesort.defaults,settings);this.$table.find("thead th").bind("click.tablesort",function(){self.sort($(this))});this.index=null;this.$th=null;this.direction=
-null};$.tablesort.prototype={sort:function(th,direction){var start=new Date,self=this,table=this.$table,rows=table.find("tbody tr"),aRow,bRow,aIndex,bIndex,cache=[];if(rows.length===0)return;self.$table.find("thead th").removeClass(self.settings.asc+" "+self.settings.desc);this.index=th.index();this.$th=th;if(direction!=="asc"&&direction!=="desc")this.direction=this.direction==="asc"?"desc":"asc";else this.direction=direction;direction=this.direction=="asc"?1:-1;self.$table.trigger("tablesort:start",
-[self]);self.log("Sorting by "+this.index+" "+this.direction);rows.sort(function(a,b){aRow=$(a);bRow=$(b);aIndex=aRow.index();bIndex=bRow.index();if(cache[aIndex])a=cache[aIndex];else{a=sortValueForCell(th,self.cellToSort(a),self);cache[aIndex]=a}if(cache[bIndex])b=cache[bIndex];else{b=sortValueForCell(th,self.cellToSort(b),self);cache[bIndex]=b}if(a>b)return 1*direction;else if(a<b)return-1*direction;else return 0});rows.each(function(i,tr){table.append(tr)});th.addClass(self.settings[self.direction]);
-self.log("Sort finished in "+((new Date).getTime()-start.getTime())+"ms");self.$table.trigger("tablesort:complete",[self])},cellToSort:function(row){return $($(row).find("td").get(this.index))},log:function(msg){if(($.tablesort.DEBUG||this.settings.debug)&&console&&console.log)console.log("[tablesort] "+msg)},destroy:function(){this.$table.find("thead th").unbind("click.tablesort");this.$table.data("tablesort",null);return null}};$.tablesort.DEBUG=false;$.tablesort.defaults={debug:$.tablesort.DEBUG,
-asc:"sorted ascending",desc:"sorted descending"};$.fn.tablesort=function(settings){var table,sortable,previous;return this.each(function(){table=$(this);previous=table.data("tablesort");if(previous)previous.destroy();table.data("tablesort",new $.tablesort(table,settings))})}});
+*/$(function(){function t(e,t,n){if(e.data().sortBy){var r=e.data().sortBy;return typeof r=="function"?r(e,t,n):r}return t.data().sortValue?t.data().sortValue:t.text()}var e=window.jQuery;e.tablesort=function(t,n){var r=this;this.$table=t,this.$thead=this.$table.find("thead"),this.settings=e.extend({},e.tablesort.defaults,n),this.$table.find("th").bind("click.tablesort",function(){r.sort(e(this))}),this.index=null,this.$th=null,this.direction=null},e.tablesort.prototype={sort:function(n,r){var i=new Date,s=this,o=this.$table,u=this.$thead.length>0?o.find("tbody tr"):o.find("tr").has("td"),a,f,l,c,h=[];if(u.length===0)return;s.$table.find("th").removeClass(s.settings.asc+" "+s.settings.desc),this.index=n.index(),this.$th=n,r!=="asc"&&r!=="desc"?this.direction=this.direction==="asc"?"desc":"asc":this.direction=r,r=this.direction=="asc"?1:-1,s.$table.trigger("tablesort:start",[s]),s.log("Sorting by "+this.index+" "+this.direction),u.sort(function(i,o){return a=e(i),f=e(o),l=a.index(),c=f.index(),h[l]?i=h[l]:(i=t(n,s.cellToSort(i),s),h[l]=i),h[c]?o=h[c]:(o=t(n,s.cellToSort(o),s),h[c]=o),i>o?1*r:i<o?-1*r:0}),u.each(function(e,t){o.append(t)}),n.addClass(s.settings[s.direction]),s.log("Sort finished in "+((new Date).getTime()-i.getTime())+"ms"),s.$table.trigger("tablesort:complete",[s])},cellToSort:function(t){return e(e(t).find("td").get(this.index))},log:function(t){(e.tablesort.DEBUG||this.settings.debug)&&console&&console.log&&console.log("[tablesort] "+t)},destroy:function(){return this.$table.find("th").unbind("click.tablesort"),this.$table.data("tablesort",null),null}},e.tablesort.DEBUG=!1,e.tablesort.defaults={debug:e.tablesort.DEBUG,asc:"sorted ascending",desc:"sorted descending"},e.fn.tablesort=function(t){var n,r,i;return this.each(function(){n=e(this),i=n.data("tablesort"),i&&i.destroy(),n.data("tablesort",new e.tablesort(n,t))})}});
Something went wrong with that request. Please try again.