CSS display attribute value changes/resets on page switch

CSS display attribute value changes/resets on page switch

ppasvenppasven Posts: 6Questions: 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");
} ); 

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 16,363Questions: 25Answers: 3,886
    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: 6Questions: 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: 6Questions: 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,363Questions: 25Answers: 3,886
    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: 6Questions: 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,363Questions: 25Answers: 3,886

    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: 6Questions: 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,363Questions: 25Answers: 3,886
    Answer ✓

    Use jQuery css() to modify the inline styles.

    Kevin

  • ppasvenppasven Posts: 6Questions: 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,363Questions: 25Answers: 3,886

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

    Kevin

Sign In or Register to comment.