Hiding rows with the Scroller extension

FlorianSimon

Hello

I'm using Datatables to show statistical tables. I have a grouping feature that is implemented by hiding grouped rows, leaving only the title row displayed. For now, I'm hiding them by applying CSS to rows that I read in the DOM with jQuery. This cannot work with Scroller, because the dataset is not fully loaded in the DOM when the extension is enabled, making it impossible to read all of a group's child rows.

My new plan is to read them using the datatables API, which allows access to all rows, regardless of whether they are loaded in the DOM or not. The second part of the plan is to hide them using the datables API. Before wasting time, I'd like to know if when I hide a row, Scroller will update itself or not.

Thanks in advance for your help.

Merry christmas to you all, and I do wish you the best for 2015 !

FlorianSimon

I could use some help. Has somebody ever needed to implement these features using DataTables ?

Thanks in advance

allan

If you want to remove rows from a DataTable, then the search API (search() and column().search()) is the way to do it. Alternatively you could also use a custom search plug-in if you need more advanced logic.

Allan

FlorianSimon

Thanks you for your help. It seems to me that using DataTables' custom searching abilities is the way to go. The question is, will it work with Scroller (and deferRendering in general) ?

FlorianSimon

It turned out to work. For future reference, I'll document my case here.

My data set is a large statistical data set, where we have identification columns (year, month, customer name...) and statistical data (net amounts, gross quantities, whatever...). I wanted to allow the user to group rows and to hide a whole group, leaving only aggregate rows displayed. Short example :

Instead of having :
* 2014, 01, Microsoft, stats
* 2014, 01, Yahoo, stats
* 2014 TOTAL, -, -, summed stats

The user can hide the first two rows to get :
* 2014 TOTAL, -, -, summed stats

My first approach was to mark each "2014" row with an invisible span with 'groupX' for class name, where X is the number of the group (there are several groups in my data set). When the user wanted to have only the aggregate row, with jQuery, I did this :

$('span.group1).parent().parent().addClass('hide');

This DOES NOT WORK when Scroller or deferRender is enabled.

Problem is, with Scroller, and deferRender in general, not all rows are loaded in the DOM. Sometimes, rows from a group were displayed even though the user wanted them hidden, because there were not in the DOM by the time they were requested to be hidden.

Instead of reading them from the DOM, I implemented a custom-search plugin, as suggested by the master himself, which allowed me to filter out hidden rows, even if they weren't in the DOM. I used the same solution, seeking all 'groupX' in my DataTable instead.

I know there might be better solutions, but this one works fast. It is good enough for me !

Thanks Allan for your help,

FlorianSimon

I can't close the thread, or mark it as solved. I get a "permission problem" when trying to edit it.

allan

Hi,

Good to hear you have got this sorted and working the way you want now :-).

Regards,
Allan