2

I am using the tablesorter jquery plugin paired with this great tablesorter filter plugin.

I have a select box on my page that contains a list of all the columns of my table. I want to be able to limit the filter to only the selected column when the user chooses to select it.

So far I have attached an event to the select box like so:

$('#SelectedColumn').bind("change", columnSelected);

With a handler like so:

function columnSelected() {
  var selected = $(this).val();
  $.tablesorterFilter.defaults.filterColumns = [selected];
}

This does correctly set the default value for the filter column but when the filter happens it doesn't actually use that value. It appears the plugin allows you to set filtered columns only on construction. Or my jquery newbiness cant figure out how to get at the bit of data I need to flip.

2
  • Same problem. I desperately wish there was a concise example including all HTML, JS and references... this is a nightmare.
    – user736893
    Sep 5, 2013 at 21:03
  • @ScottBeeson Try out my fork of tablesorter. It has a filter widget that might work for you ~ check out the filter_onlyAvail option.
    – Mottie
    Jan 7, 2014 at 14:52

3 Answers 3

0

this got me what I wanted in a brute force sort of way. Still looking for a better solution.

function columnSelected() {
  var selected = $(this).val();
  $('#GoToTextBox').val('').focus();
  if (selected == 'Any') {
    $table.get(0).config.filter[0].filterColumns = null;
  } else {
    $table.get(0).config.filter[0].filterColumns = [selected];
  }
}
0

I work width jFilterSelect the filters for Tablesorter:

http://www.jordigirones.com/131-filtros-desplegables-con-tablesorter.html

1
  • But this filter does not work with multiple tables on a page. The selects retrieve unnecessary data from foreign columns of other tables. Does anybody know a workabout?
    – user168507
    Jul 21, 2010 at 10:23
0

I had same problem. On change event of select box, just reload the page and your problem will be solved.

<select name="search" id="search" onchange="refreshPage()" >

function refreshPage(){
        location.reload();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.