• Resolved francescoto

    (@francescoto)


    Hi!

    I spent the last 2h searching how to implement a “expand table” button to display all the rows of the table, but alas the very few solutions I found involved the JS from datatables or didn’t work for me (probably due to my lack of knowledge). I also tried with child-rows with no luck, as I could not wrap my head around them.

    I’m trying to implement something similar to the “+ Show 28 more” visible on this page (from datawrapper.de).
    I found this jsfiddle.net fiddle with what would be the greatest result (show all records button).

    I would love some help, as I am quite lost. If it’s too complicated I can live with the normal pagination, no worries.

    Thanks you very much for this amazing plugin!

    • This topic was modified 4 years, 11 months ago by francescoto. Reason: clarity
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, I’m not aware of a directly usable solution here. The quickest that I could think of would be to first use the TablePress Extension from https://tablepress.org/extensions/length-change-all-entry/
    This will add an “All” entry to the dropdown above your table, which can be used to show all rows at once.

    In addition to that, you could then try adding an HTML button below the tabe with some JavaScript that would emulate a click on that “All” entry. This would need a bit of custom code. For example, try adding this below the table Shortcode on the page where you added it:

    <button onclick="jQuery('#tablepress-123_length select').val('-1').change()">Show all rows</button>
    

    Then, also change the 123 in that code to your table’s ID.

    Regards,
    Tobias

    Thread Starter francescoto

    (@francescoto)

    Thank you very much! It’s an elegant and simple solution to a complex problem. Great thinking.

    Additionally, I hid the pagination and the dropdown menu to just have the “Show all entries” available on the front end.

    .dataTables_paginate {
        display: none;
    }
    .dataTables_length {
        display: none;
    }

    Also, making making the table have 0 margin on the bottom makes the button “more integrated” to the table.

    .dataTables_wrapper {
        margin-bottom: 0;
    }

    … and some styling of the button.

    Thanks again Tobias, have a fantastic day!

    • This reply was modified 4 years, 11 months ago by francescoto.
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Expand table (view all entries)’ is closed to new replies.