Possible to keep all rows in DOM but show/hide rows on pagination?

Possible to keep all rows in DOM but show/hide rows on pagination?

lp22lp22 Posts: 2Questions: 1Answers: 0

I have a problem currently where there is a complex knockout table that is dynamically altered, and allows pagination, the problem is when we enable pagination the data table removes DOM elements which causes knockout to lose sync and it falls down.

So is there a way to have pagination not add/remove DOM elements and instead just mark them as hidden so the knockout bindings do not get destroyed?

i.e I have 20 rows and 10 rows per page, when I display page one the DOM contains all 20 rows with the first 10 being shown, the last 10 being hidden, then when I go to page 2 first 10 rows are hidden and last 10 rows are now shown, but at all times there are 20 rows in the DOM, just toggled shown or hidden.

Answers

  • colincolin Posts: 15,158Questions: 1Answers: 2,587

    Hi @lp22 ,

    You can set column visibility with columns.visible, this may sort you out. If not , we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • TatsumiTatsumi Posts: 1Questions: 0Answers: 0
    edited January 2020

    I'll reply because I keep coming across this question while searching for the answer.

    The answer is no, datatables pagination always removes hidden rows from the DOM. No way around it, that's just how it was built.

    In my case, as I'm using Net Core Blazor, the answer is; since it is required to keep the rows in DOM or blazor will lose sync with its own representation of the DOM, manually creating my own pagination is the only way to go about it.

This discussion has been closed.