Custom Filter Widget on Dropdown fields

[joshlarrabee]

I have a table that contains dropdowns in one of the columns.

I have the following class specified for that columns header <th class="filter-select filter-match" data-placeholder="Select a name">Status</th>

The pick lists have the following options assigned to them:

and the resulting filter looks like this:

It's adding the options into the pick list for the filter. How do I limit that to only the Select value.

One other note is that I'm using a hidden span to include the Selected value for sorting purposes as I couldn't get the sorting to work on these dropdown fields without adding the Selected value into a hidden span.

[Mottie]

Hi @joshlarrabee!

Check out the filter_selectSource option.

[joshlarrabee]

Thank you for this insight Rob. I’m unable to figure out how to leverage that to achieve the result I’m looking for. I’m still getting all the Select Option values in my dropdown, all I want is the actual Selected option. Can you provide me with an example on how to do this?

On Sep 17, 2018, at 8:44 PM, Rob Garrison notifications@github.com wrote:

Hi @joshlarrabee https://github.com/joshlarrabee!

Check out the filter_selectSource option https://mottie.github.io/tablesorter/docs/#widget-filter-selectsource.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Mottie/tablesorter/issues/1586#issuecomment-422235440, or mute the thread https://github.com/notifications/unsubscribe-auth/AAkOzE-odyX08SMunI-p8AMkCzfAy9pvks5ucF4WgaJpZM4WsfOu.

[Mottie]

Oh, you'll also need to include and assign the input-select parser.

<th class="sorter-select filter-select filter-parsed">Status</th>

I set up this demo for you:

$(function() {
  $("table").tablesorter({
    theme: "blue",
    ignoreCase: false,
    widgets: ["filter"],
    widgetOptions: {
      filter_selectSource: {
        1: [
          "--None--",
          "Application Completed",
          "Rostered",
          "Withdrew",
          "Waitlisted",
          "Completed/Graduated"
        ]
      }
    }
  });
});

I didn't think you'd need to include the '--None--' entry, but I left it in there just in case.