Range-Filter on childrows?

[TheMassassian]

Hello,

is there a way to use the rangefilter on childrow elements?
I have a table with a column 'value', each value is a numeric attribute.
Some of the rows have childrow(s). When I filter for the exact value of a childrow I get the parent row, but when I use a rangefilter like 2000 - 6000 I won't get the parent row.

example

Est_Number Inv_Number Value
parent: 20120xx | 2012011 | 1000
child: | 2012012 | 5000

[Mottie]

Hi @TheMassassian!

Child row filtering is handled a bit differently from the parent rows in that all of the child row data is combined. Also the child row data is ignored by the filter widget if the filter_childRows option is set to false (default setting)

Eventually, I'd like the child rows to filter by column (unless it contains column or row spans); but right now, I don't think filtering a range would work.

If you could provide a demo of how the childrow and parent row are set up - I can't tell if the example above means the first cell has a rowspan, or not - maybe, I can figure out a way to work around this problem, or figure out a better solution that could be incorporated into the filter widget.

[TheMassassian]

Hi @Mottie

Thanks for your answer, this is a screentshot of an example table.
(https://cloud.githubusercontent.com/assets/7225753/2652993/0f8e1240-bfbb-11e3-8466-0e6ffca168bc.png)

EDIT: I made an example in JsFiddle:
http://jsfiddle.net/Mb8b8/2/

it is set up like this:

        table(border='1')#testtable.tablesorter   
            thead
                tr
                    th est_id
                    th inv_id
                    th value
            tbody
                tr
                    td(rowspan="2" scope="rowgroup")='2013001'
                    td='2013010'
                    td='1000'
                tr(class='tablesorter-childRow')
                    td(style='display:none')='2013001'
                    td='2013011'
                    td='5000'
                tr
                    td='2013003'
                    td='2013015'
                    td='3000'
                tr
                    td='2013004'
                    td='2013016'
                    td='250'
                tr
                    td='2013005'
                    td='2013017'
                    td='80'

The tablesorter-configuration:

$('#testtable').tablesorter({
    theme: 'bootstrap',
    widthFixed : true,
    widgets: [ 'uitheme', 'zebra', 'filter'],
    widgetOptions : {
      zebra : ["even", "odd"],
      filter_childRows  : true
     } 
  });

I also noticed another thing as well. After filtering with a value which is not in the table like "not in the table" and resetting the filter the table looks like this. I'm pretty sure I am doing something wrong here.
The error does not occur in my jsfiddle example.
(https://cloud.githubusercontent.com/assets/7225753/2653097/cff46312-bfbc-11e3-8e21-e888cac0e511.png)

EDIT: I fixed that issue, there were some problems with the included scripts and stylesheets.

Greetings,

TheMassassian

[Mottie]

I think I'm going to have to modify how the child row data is stored, then change the filter widget to also search through the child row data, by column (see #396). To do this, I think I'm going to have to make the cache store some data as an array, so cells with multiple values can also be filtered (ref).

I'll put this on my to-do list, and hopefully get these changes included in v2.16.

[TheMassassian]

Thank your very much for your feedback. In my spare time I'll have a look at the tablesorter implementation and try to come up with an idea for this problem :)

[Mottie]

Well, I have two parts of the puzzle completed...

This is the parser that will split the cell contents (e.g. "31,42") and save it as an array:

$.tablesorter.addParser({
    id: "cellarray",
    is: function() {
        return false;
    },
    format: function(s, table) {
        if (!/,/.test(s)) {
            return $.tablesorter.formatFloat((s || '').replace(/[^\w. \-()]/g, ''), table);
        }
        var arry = s.split(',');
        $.each(arry, function(i, v){
            arry[i] = $.tablesorter.formatFloat((v || '').replace(/[^\w. \-()]/g, ''), table);
        });
        return arry.sort();
    },
    type: "numeric"
});

and then you need to set up a special text sorter, which I might end up incorporating into the core because this method would make dealing with child rows easier:

$('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    textSorter : {
        1 : function(a, b){
            a = ($.isArray(a)) ? a[0] : a;
            b = ($.isArray(b)) ? b[0] : b;
            return a - b;
        }
    }
});

Now all that is left is fixing the filter widget to work with arrays...

[antoinegoutagny]

+1 for child row filtering per column instead of all content. That would be a great improvement!

[Mottie]

Ok, I finally got around to making the filtering of child row content by column to work!

The only caveat I can think of right now is that if the child row contains any colspan or rowspan, the filtering may not align to the correct column... I may have to add a data-column to each child row to ensure that the correct column is being filtered; but I'll leave that for another day.