CSS display attribute value changes/resets on page switch

CSS display attribute value changes/resets on page switch

ppasvenppasven Posts: 19Questions: 1Answers: 0

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");
} ); 
«1

Answers

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    edited August 4

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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">
    
  • ppasvenppasven Posts: 19Questions: 1Answers: 0
    edited August 4

    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
    });
    
  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    Answer ✓

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    Answer ✓

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0
    edited August 5

    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?

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    Answer ✓

    Use jQuery css() to modify the inline styles.

    Kevin

  • ppasvenppasven Posts: 19Questions: 1Answers: 0
    edited August 5

    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.

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971

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

    Kevin

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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();
    
  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    Answer ✓

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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.

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    edited August 9 Answer ✓

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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);
                                    });
                                
                            });
                                
                    },
    
  • kthorngrenkthorngren Posts: 16,778Questions: 25Answers: 3,971
    Answer ✓

    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

  • ppasvenppasven Posts: 19Questions: 1Answers: 0

    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.

Sign In or Register to comment.