mark.js in Tablesorter

[airthomas]

Hi Mottie,

Sorry, it is a feature request, can mark.js or tablesorter self work word hgihlight in tablesorter after filter ?

Many thanks.

[Mottie]

Hi @airthomas!

I'll see what I can do!

[airthomas]

many thanks.

[Mottie]

I forgot about this because you closed it LOL...

Here is a demo.

I basically copied the "official" mark.js demo code into the tablesorter playground.

[airthomas]

The demo looks great, any method to unmark thead ? and how can implement it if "filter by column".
Thanks your help.

[Mottie]

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;
}

[airthomas]

It's really cool and awesome !!! many thanks Mottie.

[TheSin-]

bag and tag it, widget-mark.js ;)

[Mottie]

Actaully, I've been working on making a widget-mark.js. I've been trying to get it to work properly with regex - see https://github.com/julmot/mark.js/issues/55.

It should be ready for the next release.

[julkue]

@Mottie Fantastic 🍻