Similar to 'search' box filtering datatable, filter on other condition?

BoltBait

I would like to have a checkbox that when checked would hide all rows of my datatable that do not have a specific style associated with them.

In my datatable, I have 9 columns. In the 3rd column, there is a checkbox that if checked the row (tr) has a style of 'tr.used' applied to it. If the checkbox is not checked, the style of that row is removed. This all works perfectly.

I would like to have a checkbox outside of that table that would filter the visible rows down to only those with the 'tr.used' style. When unchecked, of course, it would need to show all rows.

Is this possible?

My project looks something like this:
http://live.datatables.net/xuxijici/1/edit?html,js,output

Hmmm... the row reorder doesn't seem to be working on this demo.

I imagine that below the table, I'd add this:

<label><input type=checkbox onchange="alert('What code do I put in here?');">
Show only Used rows</label>

Unlike this example: https://www.datatables.net/examples/api/select_single_row.html I don't want to delete the row, I only want to temporarily hide them.

Thanks!

BoltBait

Is there a way to iterate over the collection of rows and Hide/Show individual rows based on the contents of one of the cells?

jLinux

Sure, you can use a closure as the row-selector in rows() when selecting the rows, thats what i do.

Ill write up a demo when i get home

And the row reorder might have an issue with you having checkboxes in the cells, unless you specify a certain column as the row reorder handler... i had an issue w that

jLinux

I was able to get a small demo working

As you can see, I just use a function as the row-selector for rows() call and call rows().select() on anything that makes that function selector return true:

dt.rows(function(index,row){
    return $('#example > tbody > tr:eq('+index+') > td:eq(1) > input[type="checkbox"]').is(':checked');
}).select();

Keep in mind, that you cant simply parse the row with the checkbox inputs from the DataTables data, because it will keep what it sees when it loaded the row data on init. This means you need to use jQuery to process the row & checkbox to see if its checked. Maybe you can use rows().invalidate() to solve the above, but I'm not sure.

I also tried to execute rows().deselect() right before I ran rows().select(), so that when you click the "Select all A" button, it would check only the rows with checked inputs, (meaning it would uncheck the others first), but for some reason, it would always just uncheck the other rows first), but it would only uncheck all the other rows.. Heres the code I tried to use for that (which is also in the JSBin)

dt
    // Deselect all first
    .rows().deselect()

    // Select any rows where checkbox in C is checked
    .rows(function(index,row){
        return $('#example > tbody > tr:eq('+index+') > td:eq(3) > input[type="checkbox"]').is(':checked');
    }).select();

@allan - Any idea why that wouldnt work? Not important to me, just curious. OP might need it

Lmk if that works or not

BoltBait

Thanks for the code, jLinux.

However, your code is only selecting the lines, not hiding/showing the lines based on the checkbox like the search box does. If you look at the example I posted, I already have it highlighting the rows I want... now, I just need to temporarily hide the rows that are not checked.

jLinux

Ohh... Hmm... I dont see a way to do that. If theres a way to hide/show rows based on a row-selector, then you could use that same function I used above..

Theres gotta be a way to do that, I just havent. Ill look, but no promises

jLinux

I looked through the DT source code, and it doesnt look like you can do that...

But, are you decent with JS? If so, you can write something pretty similar to the example shown here to do what the function I showed you above does... should be easy enough

BoltBait

Thanks for the code, jLinux.

I got it working. Here is the proof of concept:

http://live.datatables.net/gulepira/1/edit?js,output

It still needs a little polish, but at least it is working.

EDIT: Here is some of the polish...

The sample site linked above doesn't work with row reordering. I think it might be a bug in the sample site, not my code. Anyway, when I implemented my ideas on my official site, I had to add the following to get it to work with row reordering:

        table.on("row-reorder", function () {
            if ($('#showused').is(':checked')) table.draw(false);
        });

Otherwise, every time I reordered a row, ALL rows would be showing after the reorder.

BoltBait

<snip>

BoltBait

Finally fixed all the bugs:
http://live.datatables.net/nelujavu/2/edit?html,js,output

Pierce Krouse

I need to do something similar to this, with my first table column holding a checkbox for the user to click. Every time the user sorts the table, the checkboxes lose their settings. How would I stop that from happening? I looked through your live example above and cannot see how you maintain the checkbox settings.

allan

Are you using server-side processing? If so that is likely the cause of the issue there - when server-side processing is enabled, rows are only held at the client-side for the duration of each page's life time - on the next draw the row is destroyed and new ones created. Thus any input elements and the meta data are also lost.

This shouldn't be the case with client-side processing where the rows are retained and thus the input elements should also retain their selection status.

Allan

Pierce Krouse

I am not doing server-side processing. I am pretty sure I am doing something wrong with the checkboxes in the rows though, so I will keep looking. Thanks Allan.