Permalink
Browse files

destroy old sorters, more jquery-like

  • Loading branch information...
1 parent ad5ca04 commit 70410a32b5ee4e30a0ab0e53b5afcfe7bfdf9a24 @kylefox committed Mar 7, 2012
Showing with 65 additions and 21 deletions.
  1. +18 −7 index.html
  2. +47 −14 jquery.tablesort.js
View
@@ -3,7 +3,7 @@
<title></title>
<style type="text/css">
body {
- font: normal 18px/24px Georgia, serif;
+ font: normal 16px/24px Georgia, serif;
}
table {
font-size: 1em;
@@ -15,11 +15,22 @@
padding: 10px 30px 10px 15px;
text-align: left;
}
+ th.sorted {
+ background: #eee;
+ }
+
+ th.ascending:after {
+ content: " \2191";
+ }
+
+ th.descending:after {
+ content: " \2193";
+ }
</style>
</head>
<body>
-<!-- <table>
+<table>
<thead>
<tr>
<th>Name</th>
@@ -32,29 +43,29 @@
<tr>
<td>Thom Yorke</td>
<td>Radiohead</td>
- <td>October 7, 1968</td>
+ <td data-sort-value="2">October 7, 1968</td>
<td>43</td>
</tr>
<tr>
<td>Justin Vernon</td>
<td>Bon Iver</td>
- <td>April 30, 1981</td>
+ <td data-sort-value="4">April 30, 1981</td>
<td>30</td>
</tr>
<tr>
<td>Paul McCartney</td>
<td>The Beatles</td>
- <td>June 18, 1942</td>
+ <td data-sort-value="1">June 18, 1942</td>
<td>69</td>
</tr>
<tr>
<td>Sam Beam</td>
<td>Iron &amp; Wine</td>
- <td>July 26, 1974</td>
+ <td data-sort-value="3">July 26, 1974</td>
<td>37</td>
</tr>
</tbody>
-</table> -->
+</table>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
View
@@ -1,30 +1,32 @@
$(function() {
- function debug(msg) {
- if(console && console.log) {
- console.log('[tablesort] ' + msg);
- }
- }
+ 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;
}
- return td.text();
+ if(td.data().sortValue) {
+ return td.data().sortValue;
+ } else {
+ return td.text();
+ }
}
- function SortableTable($el) {
+ $.tablesort = function ($el, settings) {
var self = this;
this.$el = $el;
+ this.settings = $.extend({}, $.tablesort.defaults, settings);
this.$el.find('thead th').bind('click.tablesort', function() {
self.sort($(this));
});
this.index = null;
+ this.th = null;
this.direction = null;
- }
+ };
- SortableTable.prototype = {
+ $.tablesort.prototype = {
sort: function(th) {
var start = new Date(),
@@ -41,11 +43,15 @@ $(function() {
if(rows.length === 0)
return;
+ self.$el.find('thead th').removeClass(self.settings.asc + ' ' + self.settings.desc);
+
this.index = th.index();
+ this.th = th;
this.direction = this.direction === 'asc' ? 'desc' : 'asc';
direction = this.direction == 'asc' ? 1 : -1;
- debug("Sorting by " + this.index + ' ' + this.direction);
+ self.$el.trigger('tablesort:start', [self]);
+ self.log("Sorting by " + this.index + ' ' + this.direction);
rows.sort(function(a, b) {
aRow = $(a);
@@ -82,21 +88,48 @@ $(function() {
table.append(tr);
});
- debug('Sort finished in ' + ((new Date()).getTime() - start.getTime()) + 'ms');
+ th.addClass(self.settings[self.direction]);
+
+ self.log('Sort finished in ' + ((new Date()).getTime() - start.getTime()) + 'ms');
+ self.$el.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.$el.find('thead th').unbind('click.tablesort');
+ return null;
}
};
- $.fn.tablesort = function() {
- var table, sortable;
+ $.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);
- table.data('tablesort', new SortableTable(table));
+ previous = table.data('tablesort');
+ if(previous) {
+ table.data('tablesort', previous.destroy());
+ }
+ table.data('tablesort', new $.tablesort(table, settings));
});
};

0 comments on commit 70410a3

Please sign in to comment.