tablesorter exact match only filter & scroller

[pasquab]

hi all I have an Issue with exact match only, with the combination of widgets: ['filter','scroller'], it does not work properly with similar name (example: putting 'Max' in the filter it works. Putting 'Max Miller' match not found, but if i put another name and then again 'Max Miller' the result is available. Thank you so much for your support and advice

CODE:

var $table = $("table"),
  process = false;

$(".process").click(function() {
  process = !process;
  $.tablesorter.isProcessing($table, process);
});

$(".sortable").click(function() {
  $table
    .find(".tablesorter-header:last")
    .toggleClass("sorter-false")
    .trigger("update");
});

$(function() {
  $.tablesorter.addParser({
    id: "data",
    is: function(s) {
      return false;
    },
    format: function(s, table, cell, cellIndex) {
      var $cell = $(cell);
      if (cellIndex === 1) {
        return $cell.attr("data-date") || s;
      }
      return s;
    },
    type: "text"
  });

  $(function() {
    var $pager = $(".pager");
    $table.tablesorter({}).tablesorterPager({
      container: $pager,
      size: 500,
      output: "Showing: {endRow} of {totalRows} Cases  " // '{page}/{totalPages}'
    });

    //* No data found */
    $("table").on("filterEnd filterReset", function() {
      var c = this.config,
        fr = c.filteredRows;
      if (fr === 0) {
        c.$table.append(
          [
            '<tr class="noData" role="alert" aria-live="assertive">',
            '<td style="color:red;font-size:16px;" colspan="' +
              c.columns +
              '">No results found!<p>Please double check what you have typed or check if there is still a filter left which does not match!</td>',
            "</tr>"
          ].join("")
        );
      } else {
        c.$table.find(".noData").remove();
      }
    });
  });

  $("#table1").tablesorter({
    dateFormat: "ddmmyyyy",
    headers: {
      7: { sorter: "shortDate", dateFormat: "ddmmyyyy" }
    },
    theme: "green",
    sortList: [[7, 0]],
    widgets: ["zebra", "filter", "scroller"],
    widgetOptions: {
      scroller_height: 500,
      filter_childRows: false,
      filter_columnFilters: true,
      filter_reset: ".reset",
      filter_cssFilter: "tablesorter-filter",
      filter_functions: null,
      filter_hideFilters: false,
      filter_ignoreCase: true,
      filter_searchDelay: 300,
      filter_startsWith: false,
      filter_useParsedData: false,
      output_headerRows: true,
      filter_functions: {
        // Exact match only
        1: function(e, n, f, i, $r, c, data) {
          return e === f;
        }
      }
    }
  });

  $(".link-filter").click(function() {
    var filters = $("table").find("input.tablesorter-filter"),
      col = $(this).data("filter-column"),
      txt = $(this).data("filter-text");
    filters.eq(col).val(txt).trigger("search", false);
  });
  $(".link-filter-new").click(function() {
    var filters = $("table").find("input.tablesorter-filter"),
      col = $(this).data("filter-column"),
      txt = $(this).data("filter-text");
    filters.eq(col).val(txt).trigger("search", false);
  });
});

$(function() {
  var $table = $("#table1");
  $("#reset-link").click(function(e) {
    $table.trigger("filterReset");
    return false;
  });
});

[Mottie]

Hi @pasquab!

It's not working because tablesorter has already been initialized.

It is first initialized with no options in $table.tablesorter({}); $table is targeting all tables. So when the code $("#table1").tablesorter({...}) is executed, the entire block of code and options are ignored, because tablesorter has already been initialized on #table1.

[pasquab]

hi @Mottie! thank you for your support and fast re-action! Any advice how to make it happens?

Fyi; by removing ‘scroller‘ it works. But i need both combinations (scroller and filter) Thx for your help

[Mottie]

Change $table to target the other tables, not #table1, using a more specific selector.

[pasquab]

thx, i have still the same behavior..

[Mottie]

There are too many document ready function blocks: $(function() {...}). Remove all those wrappers, then only add one wrap around all the code; then move the initialization of #table1 to the top.

If that still doesn't work, then please add the HTML/script to this demo so I can more easily troubleshoot the problem.

[pasquab]

Hi Mottie, thank you so much for your support and answers. I tried over 2 weeks, but i have still the same behavior. It is really hard to solve this really small bug on my side.. can you please support or show me how you think it would work?

[Mottie]

I could help, but I would need to see the problem before I can tell you how to fix it. Please update the demo I shared in my last message with the minimal amount of JS/HTML needed to reproduce the problem.

[pasquab]

Hi Mottie, demo created: https://jsfiddle.net/bilop/vwabo01q/30/ please try to click first red and then the blue link and then red one again. After the red link has been clicked again, alert message will pop up with "no results found ", but actually the results should be there. thank you for your support.

[Mottie]

After updating the code in that demo, click the "Save" button, then share that new URL

[pasquab]

done :) sorry for that.... https://jsfiddle.net/bilop/vwabo01q/30/ (also updated above)

[Mottie]

Set the filter_searchFiltered option to false. When true, it only searches through the already filtered rows (demo)

[pasquab]

thank you!!!! now is clear really appreciate your support! Tested and it works fine