tablesorterfilterfunction

Adding filter data-placeholder in jquery tablesorter


Is there a way to add data-placeholder values through the table sorter jquery syntax rather than adding to the th HTML tag itself? Perhaps using the headers syntax like with filter: false?


Solution

  • There are five ways to disable a column filter (demo):

    HTML (showing 3 ways)

    <table class="tablesorter">
        <thead>
            <tr>
                <th>AlphaNumeric</th>
                <th class="filter-false">Numeric</th> <!-- class name -->
                <th class='{ "filter": false }'>Numeric2</th> <!-- meta data (requires metadata plugin) -->
                <th data-filter="false">Animals</th> <!-- data-attribute -->
                <th>Sites</th>
            </tr>
        </thead>
        <tbody>
        ...
        </tbody>
    </table>
    

    Script (showing 2 ways)

    $(function(){
      // jQuery data (Sites column)
      $('table').find('th:eq(4)').data('filter', false);
    
      $('table').tablesorter({
          theme: 'blackice',
          headers: {
              0: { filter: false } // headers option (Alphanumeric column)
          },
          widgets: ['zebra', 'filter']
      });
    });
    

    Oops, sorry I'm tired; long day. To add a placeholder to the filter, use either of these methods:

    <th data-placeholder="Enter something...">AlphaNumeric</th>
    

    or using script

    // target the column using eq(0), where the number is a zero-based index of the column
    $('.tablesorter th:eq(0)').data('placeholder', 'Enter something...');