From 9f487c538472d71d0374c2c42ee40463bf071567 Mon Sep 17 00:00:00 2001 From: Mottie Date: Sun, 17 Feb 2013 13:23:36 -0600 Subject: [PATCH] filterFormatter docs & files --- css/filter.formatter.css | 166 ++++++ docs/css/jq.css | 10 +- docs/example-widget-filter-custom.html | 25 +- docs/example-widget-filter-formatter-1.html | 498 ++++++++++++++++++ docs/example-widget-filter-formatter-2.html | 383 ++++++++++++++ docs/example-widget-filter.html | 33 +- docs/index.html | 77 ++- docs/js/docs.js | 2 +- ...ry.tablesorter.widgets-filter-formatter.js | 451 ++++++++++++++++ ...ablesorter.widgets-filter-formatter.min.js | 6 + 10 files changed, 1620 insertions(+), 31 deletions(-) create mode 100644 css/filter.formatter.css create mode 100644 docs/example-widget-filter-formatter-1.html create mode 100644 docs/example-widget-filter-formatter-2.html create mode 100644 js/jquery.tablesorter.widgets-filter-formatter.js create mode 100644 js/jquery.tablesorter.widgets-filter-formatter.min.js diff --git a/css/filter.formatter.css b/css/filter.formatter.css new file mode 100644 index 00000000..96de54fb --- /dev/null +++ b/css/filter.formatter.css @@ -0,0 +1,166 @@ +/**** Filter Formatter Elements ****/ +.tablesorter-blue .tablesorter-filter-row td { + text-align: center; + font-size: 0.9em; + font-weight: normal; +} + +/**** Sliders ****/ +/* shrink the ui sliders to look nicer inside of a table cell */ +.ui-slider { + width: 90%; + margin: 12px auto 2px auto; /* add enough top margin so the tooltips will fit */ + font-size: 0.5em; +} +.ui-slider .ui-slider-handle{ + width: 0.8em; + height: 0.8em; +} +.ui-datepicker { + font-size: 0.8em; +} + +/* Add tooltips to slider handles */ +.value-popup:after { + content : attr(data-value); + position: absolute; + bottom: 15px; + left: -3px; + min-width: 14px; + height: 12px; + background-color: #444; + background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); + background-image: -webkit-linear-gradient(top, #444, #999); + background-image: -moz-linear-gradient(top, #444, #999); + background-image: -o-linear-gradient(top, #444, #999); + background-image: linear-gradient(to bottom, #444, #999); + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-background-clip: padding-box; background-clip: padding-box; + -webkit-box-shadow: 0px 0px 4px 0px #777; + box-shadow: 0px 0px 4px 0px #777; + border: #444 1px solid; + color: #fff; + font: bold 0.8em/1em Arial; + padding: 1px; + text-align: center; +} +.value-popup:before { + content: ""; + position: absolute; + width: 0; + height: 0; + border-top: 8px solid #777; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + top: -8px; + left: 50%; + margin-left: -8px; + margin-top: -1px; +} + +/**** Date Picker ****/ +.dateFrom, .dateTo { + width: 80px; + margin: 2px 5px; +} + +/**** Color Picker Toggle button ****/ +.button { + width: 14px; + height: 14px; + background: #fcfff4; + background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); + margin: 5px; + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + position: relative; + display: inline-block; +} + +.button label { + cursor: pointer; + position: absolute; + width: 10px; + height: 10px; + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + left: 2px; + top: 2px; + -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); + -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); + box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); + background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); + background: -moz-linear-gradient(top, #222 0%, #45484d 100%); + background: -o-linear-gradient(top, #222 0%, #45484d 100%); + background: -ms-linear-gradient(top, #222 0%, #45484d 100%); + background: linear-gradient(top, #222 0%, #45484d 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 ); +} + +.button label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + content: ''; + position: absolute; + width: 8px; + height: 8px; + background: #00bf00; + background: -webkit-linear-gradient(top, #aaf 0%, #55f 100%); + background: -moz-linear-gradient(top, #aaf 0%, #55f 100%); + background: -o-linear-gradient(top, #aaf 0%, #55f 100%); + background: -ms-linear-gradient(top, #aaf 0%, #55f 100%); + background: linear-gradient(top, #aaf 0%, #55f 100%); + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + top: 1px; + left: 1px; + -webkit-box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5); + box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5); +} + +.button label:hover::after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + opacity: 0.3; +} + +.button input[type=checkbox] { + visibility: hidden; +} + +.button input[type=checkbox]:checked + label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +.colorpicker { + width: 30px; + height: 18px; +} +.ui-spinner-input { + width: 100px; + height: 18px; +} +.currentColor, .ui-spinner { + position: relative; + top: -8px; +} +input.number { + position: relative; + top: -5px; +} diff --git a/docs/css/jq.css b/docs/css/jq.css index acc4f384..2c95ad7b 100644 --- a/docs/css/jq.css +++ b/docs/css/jq.css @@ -4,7 +4,7 @@ h1{font-size:large;font-weight:400;margin:0;} h2{color:#333;font-size:small;font-weight:400;margin:0;} .demo{width:600px;margin:20px auto;} .demo h1,.demo h1 a{font-size:120%;text-align:center;text-decoration:none;color:#000;} -.demo p{text-align:center;} +.demo p,.center{text-align:center;} .demo table.tablesorter{font-size:14px;} table.info{border:#000 1px solid;border-collapse:collapse;margin:10px 0 0 10px;} table.tablesorter table.info tbody th,table.tablesorter table.info td{border:#000 1px solid;} @@ -44,7 +44,7 @@ form{font-size:10pt;margin-bottom:20px;width:auto;} form fieldset{padding:10px;text-align:left;width:140px;} div#main h1{border-bottom:1px solid #CDCDCD;display:block;margin-top:20px;padding:10px 0 2px;} table#tablesorter-demo {margin: 10px 0 0 0;} -table.options *,table#methods *,table#events *, p.small{font-size:small;} +table *, p.small{font-size:small;} p.small {padding-left: 25px;} p.tip em {padding: 2px; background-color: #6cf; color: #fff;} span.tip em {padding: 0 2px;background-color: #00ce53; color: #fff; font-size:90%; } @@ -64,4 +64,8 @@ span.deprecated { background: #a00; color: #fff; padding: 1px 3px; } .download:hover { background: #0d86ae; } .bootstrap_buttons button { margin: 5px 0 0 0; } #main .ui-accordion-header a { font-size: 14px; margin-left: 24px; } -#main .ui-accordion-content { font-size: 14px; } \ No newline at end of file +#main .ui-accordion-content { font-size: 14px; } + +@media all and (max-width: 650px) { + table.compatibility { float: none; } +} \ No newline at end of file diff --git a/docs/example-widget-filter-custom.html b/docs/example-widget-filter-custom.html index d3a8bcb9..3ca4554c 100644 --- a/docs/example-widget-filter-custom.html +++ b/docs/example-widget-filter-custom.html @@ -1,8 +1,8 @@ - + - - jQuery plugin: Tablesorter 2.0 - Custom Filter Widget + + jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions @@ -146,7 +146,7 @@ @@ -161,21 +161,22 @@

Default Select ("First Name" column)

@@ -184,7 +185,7 @@

Custom Filter Function ("Last Name" column)

    -
  • To enable this type of filter, add your custom function to the filter_functions option following this example:
    filter_functions : {
    +				
  • To enable this type of filter, add your custom function to the filter_functions option following this example:
    filter_functions : {
     
       // Exact match only
       1 : function(e, n, f, i) {
    @@ -203,7 +204,7 @@
     			
    • To enable this type of select, add your custom options within the filter_functions option.
    • Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option.
    • -
    • Here is an example using alphabetical comparisons (using regular expressions):
      filter_functions : {
      +				
    • Here is an example using alphabetical comparisons (using regular expressions):
      filter_functions : {
       
         // Add these options to the select dropdown (regex example)
         2 : {
      @@ -217,7 +218,7 @@
         }
       
       }
    • -
    • Here is an example using numerical comparisons:
      filter_functions : {
      +				
    • Here is an example using numerical comparisons:
      filter_functions : {
         // Add these options to the select dropdown (numerical comparison example)
         // Note that only the normalized (n) value will contain numerical data
         // If you use the exact text, you'll need to parse it (parseFloat or parseInt)
      @@ -234,7 +235,7 @@
       		

      Filter function information

        -
      • The custom function must return a boolean value. If true is returned, the row will be shown if all other filters match; and if false is returned, the row will be hidden.
        function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }
      • +
      • The custom function must return a boolean value. If true is returned, the row will be shown if all other filters match; and if false is returned, the row will be hidden.
        function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }
      • The exact text (e) of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.
      • Normalized table cell data (n) is the next varibale passed to the function.
      diff --git a/docs/example-widget-filter-formatter-1.html b/docs/example-widget-filter-formatter-1.html new file mode 100644 index 00000000..025a31a0 --- /dev/null +++ b/docs/example-widget-filter-formatter-1.html @@ -0,0 +1,498 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (part 1) + + + + + + + + + + + + + + + + + + + + + + + + + +
      + +

      +
      +
      + +

      Notes

      +
      +
        +
      • This page shows you how to add a few jQuery UI widgets to interact with the filter widget using the filter_formatter option.
      • +
      • Custom filter widget option filter_formatter was added in version 2.7.7.
      • +
      • This widget "should" work with tablesorter v2.0.5.
      • +
      • jQuery v1.4.3+ required.
      • +
      +
      + +

      jQuery UI Single Slider ("Rank" column)

      +
      +
        +
      • This example shows how you can add a jQuery UI slider to filter column content.
      • +
      • The filter_formatter function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.
      • +
      • Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.
      • +
      • Add the following code to apply a slider to filter a column:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // hidden filter input/selects will resize the columns, so try to minimize the change
        +    widthFixed : true,
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +        0 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
        +            // add any of the jQuery UI Slider options here
        +            value: 0,             // starting value
        +            min: 0,               // minimum value
        +            max: 100,             // maximum value
        +            valueToHeader: false, // add current slider value to the header cell
        +            exactMatch: true,     // exact (true) or match (false)
        +            allText: 'all',       // text shown when the slider is at the minimum value
        +          });
        +        }
        +      }
        +    }
        +  });
        +
        +});
      • +
      • The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the valueToHeader option to true to add the slider value to the header cell above the filter.
      • +
      • Another option named exactMatch was added to allow exact or general matching of column content.
      • +
      • Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the allText option.
      • +
      +
      + +

      jQuery UI Range Slider ("Age" and "Total" columns)

      +
      +
        +
      • This example shows how you can add a jQuery UI range slider to filter column content.
      • +
      • The filter_formatter function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.
      • +
      • Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.
      • +
      • The range slider is actually the same as the single slider described above, but was built to handle a range of values.
      • +
      • Add the following code to apply a range slider to filter a column:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // hidden filter input/selects will resize the columns, so try to minimize the change
        +    widthFixed : true,
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +
        +        // Age column
        +        3 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
        +            values: [1, 70],     // starting range
        +            min: 1,              // minimum value
        +            max: 70,             // maximum value
        +            exactMatch: true,    // exact (true) or match (false)
        +            valueToHeader: false // add current slider value to the header cell
        +          });
        +        },
        +
        +        // Total column
        +        4 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
        +            values: [1, 160],    // starting range
        +            min: 1,              // minimum value
        +            max: 160,            // maximum value
        +            exactMatch: true,    // exact (true) or match (false)
        +            valueToHeader: false // add current slider value to the header cell
        +          });
        +        }
        +
        +      }
        +    }
        +  });
        +
        +});
      • +
      • The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the valueToHeader option to true to add the slider value to the header cell above the filter.
      • +
      • Another option named exactMatch was added to allow exact or general matching of column content.
      • +
      +
      + +

      jQuery UI Spinner ("Discount" column)

      +
      +
        +
      • This example shows how you can add a jQuery UI spinner to filter column content.
      • +
      • The filter_formatter function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.
      • +
      • Add the following code to apply a spinner to filter a column:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // hidden filter input/selects will resize the columns, so try to minimize the change
        +    widthFixed : true,
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +        5 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
        +            min : 0,
        +            max : 45,
        +            value: 1,
        +            step: 1,
        +            addToggle: true,
        +            exactMatch: true,
        +            numberFormat: "n"
        +          });
        +        }
        +      }
        +    }
        +  });
        +
        +});
      • +
      • This is the only jQuery UI widget that includes a toggle button. The toggle button is added by default, but if you don't want it, set the addToggle option to false. Without the toggle button, the filter is always active.
      • +
      • Another option named exactMatch was added to allow exact or general matching of column content.
      • +
      +
      + +

      jQuery UI Datepicker Range Selector ("Date" column)

      +
      +
        +
      • This example shows how you can add a jQuery UI Datepicker range to filter column content.
      • +
      • The filter_formatter function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.
      • +
      • This code follows the date range example from the jQuery UI docs.
      • +
      • Add the following code to apply a datepicker range selector to the filter row:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // hidden filter input/selects will resize the columns, so try to minimize the change
        +    widthFixed : true,
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +        6 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
        +            from : '12/1/2012',
        +            to   : '2/1/2014',
        +            changeMonth: true,
        +            changeYear : true
        +          });
        +        },
        +      }
        +    }
        +  });
        +
        +});
      • +
      • Note that the datepicker options are slightly different from the default datepicker options: +
          +
        • Instead of using the defaultDate option of the datepicker widget, it has a from and to option to fullfill that purpose.
        • +
        • The options added to this function will be applied to both the from and to datepicker inputs.
        • +
        +
      • +
      +
      + +

      Custom Filter Formatter Function Information

      +
      + If you want to write your own custom filter formatter function, there are certain requirements that should be met: +
        +
      • Required input element: +
          +
        • If your selector isn't an input (e.g. jQuery UI Slider), then you'll need to return an input of type hidden which gets updated by the selector with the filter query for the column. +
          filter_formatter : {
          +  0 : function($cell, indx) {
          +    var $input = $('<input type="hidden">').appendTo($cell);
          +    // add your selector code here
          +    return $input;
          +  }
          +}
        • +
        • If the input contains a value that doesn't match a standard filter syntax, then you'll need to return an input of type hidden with the correct format.
        • +
        • This returned input element should to be attached to the $cell.
        • +
        • The returned input should have a "search" event triggered upon it after being updated.
        • +
        +
      • +
      • Some method should be added to show the user the current value of the selector - update a data attribute for css3 tooltips, or update the header cell.
      • +
      • A reset function needs to also be included; bind to the filterReset event and clear out or disable your custom selector when triggered. +
        $cell.closest('table').bind('filterReset', function(){ /* update the input here */ });
        +
      • +
      • If your selector needs a parsed value to work with, add the filter-parsed class name to the header cell above the filter, use this code to do that: +
        $cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
        +
      • +
      • Since, by default, the filter only matches cell content, a 1 in the filter will show all rows with a one no matter where it is located. So, if you need an exact match, add an equal sign to the end of the value (1=). This forces the filter to exactly match the value in the search input.
      • +
      +
      + +
      + +

      Demo

      + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      RankColorNameAgeTotalDiscountDate
      1#ff0000Johnson25$5.9522%Jun 26, 2013 7:22 AM
      11#00ff00Hibert12$2.995%Aug 21, 2013 12:21 PM
      12#0000ffHenry51$42.2918%Oct 13, 2013 1:15 PM
      51#00ffffParker28$9.9920%Jul 6, 2013 8:14 AM
      21#ffff00Hood33$19.9925%Dec 10, 2012 5:14 AM
      013#ff0000Kent18$15.8945%Jan 12, 2013 11:14 AM
      005#00ff00Bruce45$153.1945%Jan 18, 2014 9:12 AM
      10#00ffffAlex3$5.294%Jan 8, 2013 5:11 PM
      16#ffff00Franco24$14.1914%Jan 14, 2014 11:23 AM
      66#000000Evans22$13.1911%Jan 18, 2013 9:12 AM
      100#ffffffBrenda18$55.2015%Feb 12, 2013 7:23 PM
      55#ffff00Bronson65$123.0032%Jan 20, 2014 1:12 PM
      9#000000Martha25$22.0917%Jun 11, 2013 10:55 AM
      + +

      Page Header

      +
      +
      <!-- jQuery UI for range slider -->
      +<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
      +<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
      +
      +<!-- tablesorter plugin -->
      +<link rel="stylesheet" href="../css/theme.blue.css">
      +<script src="../js/jquery.tablesorter.js"></script>
      +<script src="../js/jquery.tablesorter.widgets.js"></script>
      +
      +<!-- filter formatter code -->
      +<link rel="stylesheet" href="../css/filter.formatter.css">
      +<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
      +
      + +

      Javascript

      +
      +
      
      +	
      + +

      HTML

      +
      +
      
      +	
      + + + +
      + + + + diff --git a/docs/example-widget-filter-formatter-2.html b/docs/example-widget-filter-formatter-2.html new file mode 100644 index 00000000..f433f365 --- /dev/null +++ b/docs/example-widget-filter-formatter-2.html @@ -0,0 +1,383 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (part 2) + + + + + + + + + + + + + + + + + + + + + + + + +
      + +

      +
      +
      + +

      Notes

      +
      +
        +
      • This page shows you how to add a few default HTML5 elements to interact with the filter widget.
      • +
      • Custom filter widget option filter_formatter was added in version 2.7.7.
      • +
      • This widget "should" work with tablesorter v2.0.5.
      • +
      • jQuery v1.4.3+ required.
      • +
      +
      + +

      HTML Range ("Rank" column)

      +
      +
        +
      • This example shows how you can add an HTML5 range input slider to filter column content.
      • +
      • The filter_formatter function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.
      • +
      • Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.
      • +
      • Add the following code to apply an HTML5 range slider to the filter row:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +        0 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
        +            value: 0,
        +            min: 0,
        +            max: 100,
        +            valueToHeader: true,
        +            exactMatch: true,
        +            allText: 'all'
        +          });
        +        }
        +      }
        +    }
        +  });
        +
        +});
      • +
      • By default, this code has the valueToHeader option set to true to add the slider value to the header cell above the filter.
      • +
      • The tooltip above the slider is NOT added in this example because the slider handle is not a separate element. But if you are interested, you can use this code by Chris Coyier to animate a range slider bubble.
      • +
      • Another option named exactMatch was added to allow exact or general matching of column content.
      • +
      • Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the allText option.
      • +
      +
      + +

      HTML5 color input ("Color" column)

      +
      +
        +
      • This example shows how you can add an HTML5 color input to filter column content.
      • +
      • The filter_formatter function is used to add a custom control within the filter row, but a hidden input is still required to store the filter value.
      • +
      • Add the following code to apply a color input to the filter row:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // hidden filter input/selects will resize the columns, so try to minimize the change
        +    widthFixed : true,
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +        1 : function($cell, indx){
        +          return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
        +            value: '#000000',
        +            addToggle: true,
        +            valueToHeader: false
        +          });
        +        }
        +      }
        +    }
        +  });
        +
        +});
      • +
      • This color selector will only output the color as a hex value with a hash followed by six characters (#000000).
      • +
      • By default, this code has the valueToHeader option set to false. The currently selected color is added to a span within the cell by default.
      • +
      • This selector includes a toggle button. The toggle button is added by default, but if you don't want it, set the addToggle option to false. Without the toggle button, the filter is always active.
      • +
      +
      + +

      HTML5 Number Selector ("Age" column)

      +
      +
        +
      • This example shows how you can add an HTML5 number spinner to the filter column content.
      • +
      • The filter_formatter function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.
      • +
      • Add the following code to apply an HTML spinner to filter a column:
        $(function() {
        +
        +  $("table").tablesorter({
        +    theme: 'blue',
        +    // hidden filter input/selects will resize the columns, so try to minimize the change
        +    widthFixed : true,
        +    // initialize zebra striping and filter widgets
        +    widgets: ["zebra", "filter"],
        +    widgetOptions : {
        +      // jQuery selector string of an element used to reset the filters
        +      filter_reset : 'button.reset',
        +      // add custom selector elements to the filter row
        +      filter_formatter : {
        +        3: function($cell, indx){
        +          return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
        +            value: 1,
        +            min: 1,
        +            max: 65,
        +            addToggle: true,
        +            exactMatch: true
        +          });
        +        }
        +      }
        +    }
        +  });
        +
        +});
      • +
      • This is spinner includes a toggle button. The toggle button is added by default, but if you don't want it, set the addToggle option to false. Without the toggle button, the filter is always active.
      • +
      • Another option named exactMatch was added to allow exact or general matching of column content.
      • +
      +
      + +
      + +

      Demo

      + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      RankColorNameAgeTotalDiscountDate
      1#ff0000Johnson25$5.9522%Jun 26, 2013 7:22 AM
      11#00ff00Hibert12$2.995%Aug 21, 2013 12:21 PM
      12#0000ffHenry51$42.2918%Oct 13, 2013 1:15 PM
      51#00ff00Parker28$9.9920%Jul 6, 2013 8:14 AM
      21#ffffffHood33$19.9925%Dec 10, 2012 5:14 AM
      013#ff0000Kent18$15.8944%Jan 12, 2013 11:14 AM
      005#00ff00Bruce45$153.1944%Jan 18, 2014 9:12 AM
      10#000000Alex3$5.294%Jan 8, 2013 5:11 PM
      16#ff0000Franco24$14.1914%Jan 14, 2014 11:23 AM
      66#000000Evans22$13.1911%Jan 18, 2013 9:12 AM
      100#ffffffBrenda18$55.2015%Feb 12, 2013 7:23 PM
      55#000000Bronson65$123.0032%Jan 20, 2014 1:12 PM
      9#000000Martha25$22.0917%Jun 11, 2013 10:55 AM
      + +

      Page Header

      +
      +
      <!-- jQuery UI for range slider -->
      +<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
      +<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
      +
      +<!-- tablesorter plugin -->
      +<link rel="stylesheet" href="../css/theme.blue.css">
      +<script src="../js/jquery.tablesorter.js"></script>
      +<script src="../js/jquery.tablesorter.widgets.js"></script>
      +
      +<!-- filter formatter code -->
      +<link rel="stylesheet" href="../css/filter.formatter.css">
      +<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
      +
      + +

      Javascript

      +
      +
      
      +	
      + +

      HTML

      +
      +
      
      +	
      + + + +
      + + + + diff --git a/docs/example-widget-filter.html b/docs/example-widget-filter.html index a9672d32..320f3844 100644 --- a/docs/example-widget-filter.html +++ b/docs/example-widget-filter.html @@ -1,10 +1,9 @@ - + - + jQuery plugin: Tablesorter 2.0 - Filter Widget - @@ -33,7 +32,7 @@