CSS display attribute value changes/resets on page switch

ppasven

For example, I have set my 1st page table entries to 5 rows max. I have then grouped some entries at the end, lets say starting from 3rd row that are supposed to continue on the next 2nd page. So I grouped them and initially I set them to

"style=display:none;"

So I can have a dropdown/expand effect in my table - this works fine on my 1st page. I used jQuery onclick toggle fuction for that which expands the entries and makes the entries visible. The entries then expand on my first page.
When I open the next table page. The remaining entries show up there also when I inspect the table, but their style switches back to "style=display:none;" for each entry, so they are not visible anymore.

My question is how should I target this style reset and avoid it on my next page?

I found that this fires when I go to next page, but I am not quite sure what should I target next for this case, or if there is maybe even a much more simpler workaround for this problem:

$('.datatable').on( 'page.dt', function () {
         console.log("New Table Page");
} ); 

kthorngren

The best thing to do is to provide a link to your page or a test case replicating the issues so we can understand what you are doing to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Using "style=display:none;" for the rows is not standard for Datatables and Datatales does not know about these hidden rows.

Kevin

ppasven

Yes I know it doesnt know, but something resets it when I open new table page.
I am quite new to this so it may be quite a simple reload() fix or something.

Here is my test with code:
My 5 entries: (3rd has a button for making toggleRowVisibility rows visible.

<tr class="row" tabindex="0">
<tr class="row" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">  

Clicking the button on 3rd row makes the last 3 classes into visible entries:

<tr class="row toggleRowVisibility" style tabindex="0">
<tr class="row toggleRowVisibility" style tabindex="0">
<tr class="row toggleRowVisibility" style tabindex="0">

I use jQuery onClick for that toggle:

$(document.body).on('click', 'a#openEntries', function(e) {
                e.preventDefault();
                $(".row.toggleRowVisibility").toggle();
                return false;
});

I have initialized DataTable like so in my script:

var table = $('.datatable').DataTable({
                "searching": false,
                "info": false,
                "lengthChange": false,
                "pagingType": "numbers",
                "pageLength": 5,
});

Now when I click to open 2nd page of table.
Here are the entries I get (which continue from the last page).

<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">

But what I am expecting is these rows to also continue to be visible on my 2nd page. At the moment it is like my jQuery onclick had no effect for my second page entries.

<tr class="row toggleRowVisibility" style tabindex="0">

ppasven

Yes, I know it doesn't know about it. I am quite new to this, so it might just be some other linking, logic mistake that is causing this behaviour.

These are my initial 5 entries in my first page table.

<tr class="row" tabindex="0">
<tr class="row" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">

I have a jQuery onclick function attached to 2nd row a href tag. Which makes toggleRowVisibility class entries visible:

$(document.body).on('click', 'a#entryVisibility', function(e) {
                e.preventDefault();
                $(".row.toggleRowVisibility").toggle();
                return false;
 });

This function makes my last 3 entries visible on the first table page like so:

<tr class="row toggleRowVisibility" style tabindex="0">
<tr class="row toggleRowVisibility" style tabindex="0">
<tr class="row toggleRowVisibility" style tabindex="0">

I am expecting these entries to continue the same way(toggled to visible) on the next page. But when I open the next page, remaining entries are back to being:

<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">
<tr class="row toggleRowVisibility" style="display: none;" tabindex="0">

Here is my datatable initalization:

var table = $('.datatable').DataTable({
                "searching": false,
                "info": false,
                "lengthChange": false,
                "pagingType": "numbers",
                "pageLength": 5
});

kthorngren

Sounds like you will want to use rowCallback to keep up with the visibility. In the function you will need to check if you want the rows displayed or not and update the visibility appropriately.

Kevin

ppasven

I will try that, thanks!

Is there also a way to fill up 1st page final 3 rows with entries that should come after the toggleRowVisibility entries when my toggleRowVisibility is not visible? My main goal is to make a row, which when expanded open and made visible, pushes forward next rows that don't need to be hidden.
Currently I get a table only with 2 entries and the next following hidden 3 entries fill up the pageLength of 5.

kthorngren

Sounds like what you are asking for is to always display 5 rows on the page even with hiding rows. My suggestion is to create a search plugin. Here is a search plugin using checkboxes that might give you an idea:
http://live.datatables.net/rosahuka/1/edit

Kevin

ppasven

I used the rowCallback function and I am wondering how could I modify inline style on the <tr> tag?

With this I could modify class name for each row with the function:

$(row).addClass("abcd");

But how could I access inline style?

kthorngren

Use jQuery css() to modify the inline styles.

Kevin

ppasven

Great!

Is there a possibility to cancel rowCallback function after a certain row? I have another group of rows following that don't need changing of style. So I could avoid unique id's.

kthorngren

No. You will need to use if statements to determine if you need to do something with the row.

Kevin

ppasven

I am now trying to create the search plugin to do something with the hidden entries, but I can not seem to access and apply it to my tr tag entries. Here is how I built my query:

$.fn.dataTable.ext.search.push(
                    function( settings, searchData, index, rowData, counter ) {
                        var entries = $('tr[class="row toggleRowVisibility"][style="display: none;"]').map(function() {
                            return this.value;
                        }).get();

ppasven

As of now I've gotten those certain rows to return false but it still doesn't show next upcoming visible entries immediately after that?

kthorngren

Its hard to say what the problem might be without seeing it. Can you provide a test case showing what you are doing with details of what you expect?

Kevin

ppasven

I logged the output and for those rows it doesn't actually return false yet - so I don't actually know yet if the result should be what I am expecting. I am expecting for the table to not count my hidden entries, so for each table page it would still fill up max length with all the visible entries and for the table to not have different number of entries in every page.

Here's how I am trying to access those hidden rows currently - it never meets the if condition:

$.fn.dataTable.ext.search.push(
                    function( settings, searchData, index, rowData, counter ) {
                            console.log(searchData[6]);
                        if (value.indexOf(searchData[6]) !== -1) {
                            console.log("hidden row");      
                            return false;
                        }    
                        return true;
                    }
            );

(Currently I went the column data route. But I would actually want to have a check for tr class attributes. So there's that...)

Currently I wrote value variable array as the String I am trying to match with searchData[6], which is "AUDIT" String.
searchData[6] outputs the matching string, but with alot of different empty spacing in the console, so I can't get it to match and enter if clause.

https://imgur.com/a/IuX5bdL

kthorngren

I am expecting for the table to not count my hidden entries,

Do you mean in the info element, ie Showing 1 to 10 of 57 entries? Datatables will always count all table rows to show them as filtered or not.

Sorry, but providing just code snippets doesn't help much as we can't see your data, etc. Please provide a running test case showing what you are doing. This way we can have a better understanding to offer suggestions. Update the one I provided earlier or create your own:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ppasven

The test code is pretty massive, so I would have to take some hours to set it up.

But yes, I am expecting to show ALWAYS 10 entries of 57 in one page, even if there are hidden row entries in my table.

It seems that the search plugin achieves that and gets rid of the hidden entries. But now I can't toggle the visibility CSS for those hidden entries, because the entries are completely gone using this plugin?

kthorngren

The test code is pretty massive, so I would have to take some hours to set it up.

We don't need nor want to see a test case with your full solution. You should be able to build a simple test case, mostly with your code snippets above, to show the issues.

But now I can't toggle the visibility CSS for those hidden entries, because the entries are completely gone using this plugin?

Only visible rows are in the DOM. So you would need to use something like cell().node() or cells().nodes() to access the THML element of the hidden rows.

Kevin

ppasven

http://live.datatables.net/xetutodu/9/edit

There is some ascending, descending alphabetic filtering on the entries, but the rows are meant to go in the order as my html lists them.

I added comments for explaining my problems.

kthorngren

Thanks for the test case. It helps a lot.

First you don't want to use style="display: none;" or toggle this style. Just let Datatables handle it in the plugin. Looks like you have a flag previousStyle to keep track of the toggled state. Use that in the plugin as part of the condition to how or hide the rows.

I don't think you will need rowCallback. Mostly because it is executed after the search plugin where I think you are expecting to to run before and change the attributes need for the plugin. I added a couple console log statements so you can see this.

In your click event you need to call draw() to have the search plugin run.

Not sure this does exactly what you want but maybe it will help:
http://live.datatables.net/xetutodu/10/edit

If you want to keep the EXAPND FEATURE rows at the top of the table then checkout the Absolute Sorting plugin. Or maybe place them in the header and use orderCellsTop to control which row has the sorting events. Or make them inputs outside the table.

Kevin

ppasven

I am quite confused about what this is doing. Upon expanding my rows it jumps to page 1. And I also can't see any expanded rows on my pages. And some pages aren't still filled with max entries.

Can not test at the moment, but only analyze the logic:
Loading the first table page, the search plugin runs without a click function and without calling table.draw() function. So the previousStyle flag is false and then every row should already be shown on my first page, which I don't want.
If I set the initial flag state to true; then the wanted hidden rows should be hidden on the first page. (This was my little attention error).
But now if I were to make a click on my row for expand - logic toggles it to false, I get all shown again? I would expect each toggled visible entry to push forward the entries that were already visible from the row I clicked to expand from.
Now I think if I opened the next page then both of the EXPAND FEATUREs are expanded with only clicking to expand first EXPAND FEATURE, which is a problem.
So if I wanted to "uniquely" open EXPAND FEATURE NUMBER 2 on the second page, I think it should be unfortunately already expanded too? And if I click button for it, it would hide ALL of the expanded entries again, which is very problematic.

Here's a picture what I am aiming for:
https://imgur.com/a/6M7VE7C

kthorngren

Upon expanding my rows it jumps to page 1

The draw() has parameters you can supply. One of them being false which will stay on the same page.

And I also can't see any expanded rows on my pages.
And some pages aren't still filled with max entries.

I didn't look through the whole table and missed removing style="display: none;" from some rows.

Updated the test case to show these two changes:
http://live.datatables.net/xetutodu/11/edit

I would expect each toggled visible entry to push forward the entries that were already visible from the row I clicked to expand from.

Not sure what this means. The rows will be displayed as per the ordering in the table. You can disable ordering and and use the order option set to order: [] if you want the table ordered via the DOM order.

So if I wanted to "uniquely" open EXPAND FEATURE NUMBER 2 on the second page,

You will need to update your flag variable to keep track of this. Probably will need to have something in the data to denote which expand button the row belongs to. For example AUDIT-1 and AUDIT-2. Then create an object with those keys to keep track.

See if this is closer:
http://live.datatables.net/koquguqo/1/edit

Note the addition of data-audit for the two openEntries links so it can be used to toggle the object expand which keeps track of hiding or showing the hidden rows. Also turned off the initial ordering of the table.

Kevin

ppasven

This seems to be the right thing!

I think instead of controlling through data field and modifying the field (AUDIT-1 and AUDIT-2...)
I would somehow need to put these similar values to class names and check class name matching, so I could leave data fields to the same entry - just "AUDIT".

I mean creating:

class="row toggleRowVisibility1
class="row toggleRowVisibility1
class="row toggleRowVisibility1
EXPAND 2
class="row toggleRowVisibility2
class="row toggleRowVisibility2
class="row toggleRowVisibility2

And control this with .hasClass(), maybe? I don't really have a fixed number for these entries so I would need to find a way of just increasing number for entries.

ppasven

I meant a check on the class="row expandOnClickRow-(if number unique)"

ppasven

It works the right way!
Im wondering how could I create the expand entries object array beforehand according to incoming entries.

kthorngren

In initComplete you could do something like this example. Line 16 - 22 build select option list from the column using unique data. You could use something similar to build the expand object.

Kevin

ppasven

I was also testing inside the search plugin to access searchData[3] info, but from the className (I have replaced toggleRowVisibility with AUDIT entries):

//indexOf(" ") to know if spacing and class name of AUDIT-X follows...
if ($('.row').attr('class').indexOf(" ") !== 1) {
    if ($('.row').attr('class').split(' ')[1].indexOf("AUDIT-") !== -1) {
               return expand....

This way finds row, but no following AUDIT.

kthorngren

You will need to get the HTML node of searchData[3] if you want to check for the class name. Doing this will decrease the speed of the search plugin as it takes longer to get the node than the data. The speed might not be an issue depending on how much data you have. See this example from this thread for an example of how to do this.

The example gets the row's node but it sounds like you just want the searchData[3] node. Instead of var node = api.row(index).node(); you will want to use cell().node(). I think this is what you will need:

var node = api.cell(index, 3).node();

Kevin

ppasven

Superb! This node thing works!

Now my expand object array is the only last thing left. I logged one of the each functions (d and j). One of them gives me whole div objects entries. I am not exactly sure how can I pick my certain field information from this. Although now I think I would need to read it in from my row node: <tr class="row AUDIT-X"

initComplete: function () {
                    this.api()
                        .columns()
                        .every(function() {
                            var column = this;
                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function (d, j) {
                                    //console.log(d, j);
                                });
                            
                        });
                            
                },

kthorngren

Yep, that code assumes you want the data. You can use rows().nodes() to get the tr elements for the rows. Without building it I'm not sure what the code would look like. If you need help with this please build or update one of the test cases so we can experiment with the code.

Kevin

ppasven

I am fairly new to jquery, but this is what I managed to end up with and what is now working:

http://live.datatables.net/sacutoja/1/edit

I don't know if there are more optimal approaches for this or is this even one of the right ways to do it.