Ok, how about this demo

It sets the marks per column using the filter widget, and the external input marks all columns.

HTML

Highlight: <input type="text" name="keyword" data-column="all">
<p>Options:</p>
<ul>
  <li><input type="checkbox" name="opt[]" value="separateWordSearch" checked> separate word search</li>
  <li><input type="checkbox" name="opt[]" value="diacritics" checked> diacritics</li>
  <li><input type="checkbox" name="opt[]" value="debug"> debug</li>
</ul>
<button type="button" class="reset">Reset</button>
<table class="tablesorter">
  <!-- ... -->
</table>

Script

$(function() {

  var $table = $('table');

  function mark() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();

    // Determine selected options
    var options = {};
    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");
    });

    var $rows = $(".tablesorter tbody tr");
    $rows.unmark();
    var filters = $.tablesorter.getFilters($table);
    $.each(filters, function(indx, filter) {
      var col = indx === $table[0].config.columns ? '' : ':nth-child(' + (indx + 1) + ')';
      $rows.children(col).mark(filter, options);
    });
  }

  $("input[name='keyword']").on("input", mark);
  $("input[type='checkbox']").on("change", mark);

  $table
    .on('filterEnd', mark)
    .tablesorter({
      theme: 'blue',
      widgets: ['zebra', 'filter'],
      widgetOptions: {
        filter_external: 'input[name="keyword"]',
        filter_reset: '.reset'
      }
    });
});

There is also some extra css to change the color of the mark per column:

tr td:nth-child(1) mark {
  background: #aa0000;
  color: #fff;
}

tr td:nth-child(2) mark {
  background: #00aa00;
  color: #fff;
}

tr td:nth-child(3) mark {
  background: #0000aa;
  color: #fff;
}

mark.js in Tablesorter #1243

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions