Add Callback and 2 New Options

README.md

@@ -9,19 +9,34 @@ HTML Structure:
 <tr>
   <th>Item #</th>
   <th>Type</th>
+  <th class="skip-filter">Price</th>
 </tr>
 <tr>
   <td>Item 1</td>
   <td>Special</td>
+  <td>$10.00</td>
 </tr>
 <tr>
   <td>Item 2</td>
   <td>Not Special</td>
+  <td>$11.00</td>
 </tr>
 </table>
 
 This plugin requires a `<th>` for each column.  The label for the `<th>` will be replaced by a dropdown select menu containing all of the unique values present in that column.  In the above example, selecting "Special" for the type column would hide Item 2, leaving only item 1.
 
+Since we don't want to filter by things that only appear once (like price, maybe), we just add the class `skip-filter` to that column heading.
+
+For example:
+
+<pre>
+&lt;tr&gt;<br />
+&lt;th&gt;Item #&lt;/th&gt;<br />
+&lt;th&gt;Type&lt;/th&gt;<br />
+&lt;th class=&quot;skip-filter&quot;&gt;Price&lt;/th&gt;<br />
+&lt;/tr&gt;
+</pre>
+
 How To Use
 -------------------
 It's simple.  Just include ddtf.js (along with jQuery), and do:
@@ -32,6 +47,8 @@ To use the options defined below, use the following syntax:
       ...more settings here
     }
     $('#myTable').ddTableFilter(options); </pre>
+
+
 
 Options
 ------------
@@ -48,6 +65,20 @@ For customization, the following parameters are available:
 *  sortOpt: A boolean indicating whether or not to sort the options.  This must be true for sortOptCallback to work.  Defaults to true.
 *  debug: A boolean indicating whether or not to run in "debug" mode.  Debug mode displays performance data.
 *  minOptions: Number of options required to show a select filter.  Defaults to 2, meaning if a column only has one unique value, no select box will be shown (what would be the point?).
+*  firstOptionText: The first select option label text. Could be something like "All" or defaults to the column title.
+*  headingClass: Option for adding a `class` to the column heading for floating, styling, or just hiding. Defaults to no class and just `style="display:none;"`
+
+
+Callback
+------------
+The use case for the callback might be something like the following where we want to filter and then add-up all the filtered rows:
+
+<pre>$('#myTable').ddTableFilter(options, function() {
+	// Callback stuff here
+	var sum = addColumns(); // pretend that f(x) sums visible column data or something
+	$('#myTable tfoot th:nth-child(n+1)').text(sum);
+});</pre>
+
 
 Compatibility
 -------------------

ddtf.js

@@ -1,6 +1,6 @@
 (function($) {
 
-$.fn.ddTableFilter = function(options) {
+$.fn.ddTableFilter = function(options,callback) {
   options = $.extend(true, $.fn.ddTableFilter.defaultOptions, options);
 
   return this.each(function() {
@@ -16,7 +16,12 @@ $.fn.ddTableFilter = function(options) {
       var selectbox = $('<select>');
       var values = [];
       var opts = [];
-      selectbox.append('<option value="--all--">' + $(this).text() + '</option>');
+
+	  if(options.firstOptionText != '') {
+	  	selectbox.append('<option value="--all--">' + options.firstOptionText + '</option>');
+	  } else {
+		selectbox.append('<option value="--all--">' + $(this).text() + '</option>');
+	  }
 
       var col = $('tr:not(.skip-filter) td:nth-child(' + (index + 1) + ')', table).each(function() {
         var cellVal = options.valueCallback.apply(this);
@@ -42,7 +47,12 @@ $.fn.ddTableFilter = function(options) {
         $(selectbox).append('<option value="' + this.val + '">' + this.text + '</option>')
       });
 
-      $(this).wrapInner('<div style="display:none">');
+      if(options.headingClass != '') {
+		  $(this).wrapInner('<div class="' + options.headingClass + '">');
+	  } else {
+		  $(this).wrapInner('<div style="display:none">');
+	  }
+
       $(this).append(selectbox);
 
       selectbox.bind('change', {column:col}, function(event) {
@@ -96,6 +106,9 @@ $.fn.ddTableFilter = function(options) {
       var stop = new Date();
       console.log('Build: ' + (stop.getTime() - start.getTime()) + 'ms');
     }
+
+	callback();
+
   });
 };
 
@@ -119,7 +132,9 @@ $.fn.ddTableFilter.defaultOptions = {
   emptyText:'--Empty--',
   sortOpt:true,
   debug:false,
-  minOptions:2
+  minOptions:2,
+  firstOptionText: '',
+  headingClass: ''
 }
 
 })(jQuery);