filter row with input value

[ghost]

With the input-parser, it's possible to sort a column with an input value.

But it's not possible to use the "filter widget" with input value in the cells.

Is it a future option?

Thanks.

[Mottie]

Hi @johannsan!

It is already possible. Please check out the grouping widget demo and change any of the text in the "inputs" column.

[ghost]

In this demo, you don't use the filter option but the sorting option.
When I try, that don't work.
Perhaps is there a problem in my code?

<script type="text/javascript" src="jquery.tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.tablesorter/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="jquery.tablesorter/parser/parser-input-select.js"></script>
<script type="text/javascript" src="jquery.tablesorter/parser/widget-grouping.js"></script>

...
<td><input type="text" readonly="true" name="tarif.listeValeurs[0].id" value="1" id="Tarif-TarifModifierValider_tarif_listeValeurs_0__id"/></td>
</tr><tr>
<td><input type="text" readonly="true" name="tarif.listeValeurs[1].id" value="2" id="Tarif-TarifModifierValider_tarif_listeValeurs_1__id" /></td>
...

    $('#TarifValeura').tablesorter( 
            { 
                theme:'blue',
                headers: {
                      0: { sorter: "inputs" },
                      2: { sorter: "inputs" },
                      3: { sorter: "inputs" }
                    },
            widgets: ['zebra','filter','group'] 

        });

[Mottie]

Oh I see... the problem is that the filter isn't using the parsed data. Either add a filter-parsed class name to the header cell (updated demo)

<th class="filter-parsed">Inputs</th>

Or add filter: "parsed" to the headers option:

$('#TarifValeura').tablesorter({
    theme:'blue',
    headers: {
        0: { sorter: "inputs", filter: "parsed" },
        2: { sorter: "inputs", filter: "parsed" },
        3: { sorter: "inputs", filter: "parsed" }
    },
    widgets: ['zebra','filter','group']
});

In the next update, I'll make the parser automatically add that parsed flag.

[ghost]

It's ok,

It's work with parser-input-select.js a when I only add sorter: "inputs", filter: "parsed".

There is no link with without widget-grouping.js

Thanks

[I3igI3uilder]

The {...,filter: "parsed"} does not seem to work for me. The sorting works fine for all columns. But I can not get the filter work for columns 3 and 6. I do not need the group feature, so I removed it from your example.

Parsing defined in headers:{}: http://jsfiddle.net/phcjb314/
Pasing defined in the th class: http://jsfiddle.net/tfryL6jz/

Thank you

[Mottie]

Hi @I3igI3uilder!

Thanks for reporting this problem! I'll have it fixed in the master branch shortly. I plan to release a new version by this weekend.

[I3igI3uilder]

Hey Mottie

Thank you for your dedication.
I tip my artists beanie to you ;D

[bish25]

@Mottie i cant get the filter columns for inputs to work at all. looking at @I3igI3uilder jsfiddle examples i am doing exactly the same, when ever i type in the filter it hides all rows in my table.

 table.tablesorter({             
            widgets: widgetList,
            widgetZebra: { css: ["row-even", "row-odd"] },
            widgetOptions: {
                filter_columnFilters: true,  
            }
        });

As the user is building the table manually i add the extractor, sort and filter to the header in jquery. addClass("extractor-input sorter-inputs filter-parsed")

[bish25]

@Mottie the select filter sort of works, for example the select will have options such as "a,b,c,d". However when the filter select is loaded the first option is blank and then the second value is just "a". if i select "a" it filters correctly. when i debug i notice that this line var x = a.p.toString(), y = b.p.toString(); p is undefined where as t has the text.

[bish25]

@Mottie finding more as i go along, sorry to be a pain! :) if i add both .data("sort", true); and .data("filter", true); to the header the filter select contains two options blank and "abcd", its as if all of the options have been added together.

[Mottie]

Hi @bish25!

Would you please share a demo of the problem? I'm not understanding a few things in the comments provided:

when ever i type in the filter it hides all rows in my table

That sounds like you shouldn't be setting a parser for that column. The parser setting only be active if you want the user input to be compared with the parsed content. For example comparing the user input with a selected option.

You must not need to set both the extractor and parser to the same function... e.g. extractor-input sorter-inputs - this is probably why things are breaking!

var x = a.p.toString(), y = b.p.toString();

I have no idea what this means. The description of these variables doesn't sound like valid javascript to me... how is p undefined? Where is the t that is mentioned?

.data("sort", true);

I don't think this will do anything, unless you have a custom widget named "sort"

filter select contains two options blank and "abcd"

This sounds like a parser isn't being set for that column. The filter is grabbing the textContent of the select & options.

[bish25]

Hi @Mottie,
Thanks for the reply, i will try and put a demo together but its going to take a long time to put together, its going to be difficult as the table is built in JQuery. in my soultion the user will create a table by adding input, selects, checkbox, date fields. the user can then tick a checkbox if they want the table to be sortable, filtered or both.

sorry this section var x = a.p.toString(), y = b.p.toString(); can be found in the file jquery.tablesorter.widget.js line 1339.

[bish25]

@Mottie Sorry i cant get the soultion working in fiddle js, it might be pointless but read the comments https://jsfiddle.net/rkcz4tgt/8/

[bish25]

@Mottie http://jsfiddle.net/yvkj5hcg/ as you can see the filter doesn't work in the vehicle section, is there a way to add this to the class just like sort? as my table is generated in javascript

[bish25]

@Mottie Apologies for the spam but i have got everything working now, just one last question 😆 there seems to be a little bug, if i type in the input field and then quickly sort the column the selects in another row revert back to default state, however if i type in the input field then wait about 5 seconds then it works fine and keeps my selected data.

[Mottie]

Is the table being dynamically updated? I mean can the user add and remove rows at any time?

can be found in the file jquery.tablesorter.widget.js line 1339

Hmm, I searched the entire repo and that code does not exist.

Sorry i cant get the soultion working in fiddle js

That's fine, have the code to see helps alot... as I said, you can't add the same extractor and parser to a column. Change this line to only use the parser:

if (sort) {
  header.addClass("sorter-inputs");
}

filter doesn't work in the vehicle section

It's not working in that demo because the column doesn't have "sorter-inputs" set on it. So the filter is only seeing empty cells.

if i type in the input field and then quickly sort the column

I wonder if the table isn't properly being updated when an input/select has changed... the select column should have a "sorter-select" class name added to use the specific select parser.

Also, set the debug option to true and look in the dev console to see how the table is being set up... it'll help a lot!