jquery-tablesort
Advanced tools
Comparing version 0.0.10 to 0.0.11
{ | ||
"name": "jquery-tablesort", | ||
"version": "0.0.10", | ||
"version": "0.0.11", | ||
"homepage": "https://github.com/kylefox/jquery-tablesort", | ||
@@ -5,0 +5,0 @@ "authors": [ |
/* | ||
A simple, lightweight jQuery plugin for creating sortable tables. | ||
https://github.com/kylefox/jquery-tablesort | ||
Version 0.0.10 | ||
Version 0.0.11 | ||
*/ | ||
@@ -28,5 +28,5 @@ | ||
table = this.$table, | ||
//body = table.find('tbody').length > 0 ? table.find('tbody') : table, | ||
rows = this.$thead.length > 0 ? table.find('tbody tr') : table.find('tr').has('td'), | ||
cells = table.find('tr td:nth-of-type(' + (th.index() + 1) + ')'), | ||
rowsContainer = table.find('tbody').length > 0 ? table.find('tbody') : table, | ||
rows = rowsContainer.find('tr').has('td, th'), | ||
cells = rows.find(':nth-child(' + (th.index() + 1) + ')').filter('td, th'), | ||
sortBy = th.data().sortBy, | ||
@@ -74,13 +74,7 @@ sortedMap = []; | ||
sortedMap.sort(function(a, b) { | ||
if (a.value > b.value) { | ||
return 1 * direction; | ||
} else if (a.value < b.value) { | ||
return -1 * direction; | ||
} else { | ||
return 0; | ||
} | ||
return self.settings.compare(a.value, b.value) * direction; | ||
}); | ||
$.each(sortedMap, function(i, entry) { | ||
table.append(entry.row); | ||
rowsContainer.append(entry.row); | ||
}); | ||
@@ -116,3 +110,12 @@ | ||
asc: 'sorted ascending', | ||
desc: 'sorted descending' | ||
desc: 'sorted descending', | ||
compare: function(a, b) { | ||
if (a > b) { | ||
return 1; | ||
} else if (a < b) { | ||
return -1; | ||
} else { | ||
return 0; | ||
} | ||
} | ||
}; | ||
@@ -119,0 +122,0 @@ |
/* | ||
A simple, lightweight jQuery plugin for creating sortable tables. | ||
https://github.com/kylefox/jquery-tablesort | ||
Version 0.0.10 | ||
Version 0.0.11 | ||
*/ | ||
!function(t){t.tablesort=function(e,s){var i=this;this.$table=e,this.$thead=this.$table.find("thead"),this.settings=t.extend({},t.tablesort.defaults,s),this.$sortCells=this.$thead.length>0?this.$thead.find("th:not(.no-sort)"):this.$table.find("th:not(.no-sort)"),this.$sortCells.on("click.tablesort",function(){i.sort(t(this))}),this.index=null,this.$th=null,this.direction=null},t.tablesort.prototype={sort:function(e,s){var i=new Date,n=this,o=this.$table,a=this.$thead.length>0?o.find("tbody tr"):o.find("tr").has("td"),l=o.find("tr td:nth-of-type("+(e.index()+1)+")"),r=e.data().sortBy,d=[],h=l.map(function(s,i){return r?"function"==typeof r?r(t(e),t(i),n):r:null!=t(this).data().sortValue?t(this).data().sortValue:t(this).text()});0!==h.length&&(this.index!==e.index()?(this.direction="asc",this.index=e.index()):"asc"!==s&&"desc"!==s?this.direction="asc"===this.direction?"desc":"asc":this.direction=s,s="asc"==this.direction?1:-1,n.$table.trigger("tablesort:start",[n]),n.log("Sorting by "+this.index+" "+this.direction),n.$table.css("display"),setTimeout(function(){n.$sortCells.removeClass(n.settings.asc+" "+n.settings.desc);for(var r=0,c=h.length;r<c;r++)d.push({index:r,cell:l[r],row:a[r],value:h[r]});d.sort(function(t,e){return t.value>e.value?1*s:t.value<e.value?-1*s:0}),t.each(d,function(t,e){o.append(e.row)}),e.addClass(n.settings[n.direction]),n.log("Sort finished in "+((new Date).getTime()-i.getTime())+"ms"),n.$table.trigger("tablesort:complete",[n]),n.$table.css("display")},h.length>2e3?200:10))},log:function(e){(t.tablesort.DEBUG||this.settings.debug)&&console&&console.log&&console.log("[tablesort] "+e)},destroy:function(){return this.$sortCells.off("click.tablesort"),this.$table.data("tablesort",null),null}},t.tablesort.DEBUG=!1,t.tablesort.defaults={debug:t.tablesort.DEBUG,asc:"sorted ascending",desc:"sorted descending"},t.fn.tablesort=function(e){var s,i;return this.each(function(){s=t(this),i=s.data("tablesort"),i&&i.destroy(),s.data("tablesort",new t.tablesort(s,e))})}}(window.Zepto||window.jQuery); | ||
!function(t){t.tablesort=function(e,s){var i=this;this.$table=e,this.$thead=this.$table.find("thead"),this.settings=t.extend({},t.tablesort.defaults,s),this.$sortCells=this.$thead.length>0?this.$thead.find("th:not(.no-sort)"):this.$table.find("th:not(.no-sort)"),this.$sortCells.on("click.tablesort",function(){i.sort(t(this))}),this.index=null,this.$th=null,this.direction=null},t.tablesort.prototype={sort:function(e,s){var i=new Date,n=this,o=this.$table,l=o.find("tbody").length>0?o.find("tbody"):o,a=l.find("tr").has("td, th"),r=a.find(":nth-child("+(e.index()+1)+")").filter("td, th"),d=e.data().sortBy,h=[],c=r.map(function(s,i){return d?"function"==typeof d?d(t(e),t(i),n):d:null!=t(this).data().sortValue?t(this).data().sortValue:t(this).text()});0!==c.length&&(this.index!==e.index()?(this.direction="asc",this.index=e.index()):"asc"!==s&&"desc"!==s?this.direction="asc"===this.direction?"desc":"asc":this.direction=s,s="asc"==this.direction?1:-1,n.$table.trigger("tablesort:start",[n]),n.log("Sorting by "+this.index+" "+this.direction),n.$table.css("display"),setTimeout(function(){n.$sortCells.removeClass(n.settings.asc+" "+n.settings.desc);for(var o=0,d=c.length;o<d;o++)h.push({index:o,cell:r[o],row:a[o],value:c[o]});h.sort(function(t,e){return n.settings.compare(t.value,e.value)*s}),t.each(h,function(t,e){l.append(e.row)}),e.addClass(n.settings[n.direction]),n.log("Sort finished in "+((new Date).getTime()-i.getTime())+"ms"),n.$table.trigger("tablesort:complete",[n]),n.$table.css("display")},c.length>2e3?200:10))},log:function(e){(t.tablesort.DEBUG||this.settings.debug)&&console&&console.log&&console.log("[tablesort] "+e)},destroy:function(){return this.$sortCells.off("click.tablesort"),this.$table.data("tablesort",null),null}},t.tablesort.DEBUG=!1,t.tablesort.defaults={debug:t.tablesort.DEBUG,asc:"sorted ascending",desc:"sorted descending",compare:function(t,e){return t>e?1:t<e?-1:0}},t.fn.tablesort=function(e){var s,i;return this.each(function(){s=t(this),i=s.data("tablesort"),i&&i.destroy(),s.data("tablesort",new t.tablesort(s,e))})}}(window.Zepto||window.jQuery); |
{ | ||
"name": "jquery-tablesort", | ||
"version": "0.0.10", | ||
"version": "0.0.11", | ||
"description": "A simple, lightweight jQuery plugin for creating sortable tables.", | ||
@@ -5,0 +5,0 @@ "main": "jquery.tablesort.js", |
197
README.md
@@ -1,5 +0,14 @@ | ||
A tiny & dead-simple jQuery plugin for sortable tables. | ||
A tiny & dead-simple jQuery plugin for sortable tables. Here's a basic [demo](http://dl.dropbox.com/u/780754/tablesort/index.html). | ||
Here's a basic [demo](http://dl.dropbox.com/u/780754/tablesort/index.html). | ||
Maintainers Wanted | ||
--- | ||
![](https://img.shields.io/badge/maintainers-wanted-red.svg) | ||
I don't use this library much anymore and don't have time to maintain it solo. | ||
If you are interested in helping me maintain this library, please let me know! [**Read more here »**](https://github.com/kylefox/jquery-tablesort/issues/32) | ||
Your help would be greatly appreciated! | ||
Install | ||
@@ -10,7 +19,17 @@ --- | ||
<script src="http://code.jquery.com/jquery-latest.min.js"></script> | ||
<script src="jquery.tablesort.js"></script> | ||
```html | ||
<script src="http://code.jquery.com/jquery-latest.min.js"></script> | ||
<script src="jquery.tablesort.js"></script> | ||
``` | ||
(The plugin is also compatible with [Zepto.js](https://github.com/madrobby/zepto)). | ||
It's also available via [npm](https://www.npmjs.com/package/jquery-tablesort) | ||
`npm install jquery-tablesort` | ||
and [bower](https://bower.io/) | ||
`bower install jquery-tablesort` | ||
Basic use | ||
@@ -21,3 +40,5 @@ --- | ||
$('table').tablesort(); | ||
```javascript | ||
$('table').tablesort(); | ||
``` | ||
@@ -28,3 +49,5 @@ The table will be sorted when the column headers are clicked. | ||
<th class="no-sort">Photo</th> | ||
```html | ||
<th class="no-sort">Photo</th> | ||
``` | ||
@@ -40,27 +63,30 @@ Your table should follow this general format: | ||
```html | ||
<table> | ||
<thead> | ||
<tr> | ||
<th></th> | ||
... | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td></td> | ||
... | ||
</tr> | ||
</tbody> | ||
</table> | ||
``` | ||
<table> | ||
<thead> | ||
<tr> | ||
<th></th> | ||
... | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td></td> | ||
... | ||
</tr> | ||
</tbody> | ||
</table> | ||
If you want some imageless arrows to indicate the sort, just add this to your CSS: | ||
th.sorted.ascending:after { | ||
content: " \2191"; | ||
} | ||
```css | ||
th.sorted.ascending:after { | ||
content: " \2191"; | ||
} | ||
th.sorted.descending:after { | ||
content: " \2193"; | ||
} | ||
th.sorted.descending:after { | ||
content: " \2193"; | ||
} | ||
``` | ||
@@ -72,3 +98,5 @@ How cells are sorted | ||
<td data-sort-value="1331110651437">March 7, 2012</td> | ||
```html | ||
<td data-sort-value="1331110651437">March 7, 2012</td> | ||
``` | ||
@@ -84,16 +112,18 @@ This allows you to sort your cells using your own criteria without having to write a custom sort function. It also keeps the plugin lightweight by not having to guess & parse dates. | ||
// Sort by dates in YYYY-MM-DD format | ||
$('thead th.date').data('sortBy', function(th, td, tablesort) { | ||
return new Date(td.text()); | ||
}); | ||
```javascript | ||
// Sort by dates in YYYY-MM-DD format | ||
$('thead th.date').data('sortBy', function(th, td, tablesort) { | ||
return new Date(td.text()); | ||
}); | ||
// Sort hex values, ie: "FF0066": | ||
$('thead th.hex').data('sortBy', function(th, td, tablesort) { | ||
return parseInt(td.text(), 16); | ||
}); | ||
// Sort hex values, ie: "FF0066": | ||
$('thead th.hex').data('sortBy', function(th, td, tablesort) { | ||
return parseInt(td.text(), 16); | ||
}); | ||
// Sort by an arbitrary object, ie: a Backbone model: | ||
$('thead th.personID').data('sortBy', function(th, td, tablesort) { | ||
return App.People.get(td.text()); | ||
}); | ||
// Sort by an arbitrary object, ie: a Backbone model: | ||
$('thead th.personID').data('sortBy', function(th, td, tablesort) { | ||
return App.People.get(td.text()); | ||
}); | ||
``` | ||
@@ -106,2 +136,20 @@ Sort functions are passed three parameters: | ||
Custom comparison functions | ||
--- | ||
If you need to implement more advanced sorting logic, you can specify a comparison function with the `compare` setting. The function works the same way as the `compareFunction` accepted by [`Array.prototype.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort): | ||
```javascript | ||
function compare(a, b) { | ||
if (a < b) { | ||
return -1; // `a` is less than `b` by some ordering criterion | ||
} | ||
if (a > b) { | ||
return 1; // `a` is greater than `b` by the ordering criterion | ||
} | ||
return 0; // `a` is equal to `b` | ||
} | ||
``` | ||
Events | ||
@@ -112,9 +160,11 @@ --- | ||
$('table').on('tablesort:start', function(event, tablesort) { | ||
console.log("Starting the sort..."); | ||
}); | ||
```javascript | ||
$('table').on('tablesort:start', function(event, tablesort) { | ||
console.log("Starting the sort..."); | ||
}); | ||
$('table').on('tablesort:complete', function(event, tablesort) { | ||
console.log("Sort finished!"); | ||
}); | ||
$('table').on('tablesort:complete', function(event, tablesort) { | ||
console.log("Sort finished!"); | ||
}); | ||
``` | ||
@@ -126,20 +176,26 @@ tablesort instances | ||
$('table').tablesort(); // Make the table sortable. | ||
var tablesort = $('table').data('tablesort'); // Get a reference to it's tablesort instance | ||
```javascript | ||
$('table').tablesort(); // Make the table sortable. | ||
var tablesort = $('table').data('tablesort'); // Get a reference to it's tablesort instance | ||
``` | ||
Properties: | ||
tablesort.$table // The <table> being sorted. | ||
tablesort.$th // The <th> currently sorted by (null if unsorted). | ||
tablesort.index // The column index of tablesort.$th (or null). | ||
tablesort.direction // The direction of the current sort, either 'asc' or 'desc' (or null if unsorted). | ||
tablesort.settings // Settings for this instance (see below). | ||
```javascript | ||
tablesort.$table // The <table> being sorted. | ||
tablesort.$th // The <th> currently sorted by (null if unsorted). | ||
tablesort.index // The column index of tablesort.$th (or null). | ||
tablesort.direction // The direction of the current sort, either 'asc' or 'desc' (or null if unsorted). | ||
tablesort.settings // Settings for this instance (see below). | ||
``` | ||
Methods: | ||
// Sorts by the specified column and, optionally, direction ('asc' or 'desc'). | ||
// If direction is omitted, the reverse of the current direction is used. | ||
tablesort.sort(th, direction); | ||
```javascript | ||
// Sorts by the specified column and, optionally, direction ('asc' or 'desc'). | ||
// If direction is omitted, the reverse of the current direction is used. | ||
tablesort.sort(th, direction); | ||
tablesort.destroy(); | ||
tablesort.destroy(); | ||
``` | ||
@@ -164,12 +220,25 @@ Default Sorting | ||
$.tablesort.defaults = { | ||
debug: $.tablesort.DEBUG, // Outputs some basic debug info when true. | ||
asc: 'sorted ascending', // CSS classes added to `<th>` elements on sort. | ||
desc: 'sorted descending' | ||
}; | ||
```javascript | ||
$.tablesort.defaults = { | ||
debug: $.tablesort.DEBUG, // Outputs some basic debug info when true. | ||
asc: 'sorted ascending', // CSS classes added to `<th>` elements on sort. | ||
desc: 'sorted descending', | ||
compare: function(a, b) { // Function used to compare values when sorting. | ||
if (a > b) { | ||
return 1; | ||
} else if (a < b) { | ||
return -1; | ||
} else { | ||
return 0; | ||
} | ||
} | ||
}; | ||
``` | ||
You can also change the global debug value which overrides the instance's settings: | ||
$.tablesort.DEBUG = false; | ||
```javascript | ||
$.tablesort.DEBUG = false; | ||
``` | ||
Alternatives | ||
@@ -176,0 +245,0 @@ --- |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
23047
149
285