Datatable inside of Datatable child row, page keeps changing

tomasfernandes

Hi there!

I have a Datatable that when there is a click on a row ( a specific client ), opens another datatable bellow ( child row ) and load the respective licences of the client. The problem happens when i'm not on page 1 of the clients table, when I click on a row to open the licences the main table changes to page 1. I've managed to discover that when I load the licences with data and random json pre loaded, it doesn't work, but as I need an API and i'm using ajax url and dataSrc, it is happening don't know why.

Can someone please help me?

Best Regards

colin

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

tomasfernandes

Sorry Colin! You can check it out at https://www.parceiros.filosoft.pt
With login teste@filosoft.pt and password: Test@2021

then go to the page: https://www.parceiros.filosoft.pt/clientes

kthorngren

Took a quick look but haven't found the problem. I placed a breakpoint at the end of the child details click event and the table is still on the same page at that point - this is page 2.

I wonder if there is an event that happens afterwards causing Datatables to go to the first. I scanned argon.js but didn't see anything obvious. Maybe you know of an event in your code that might do something with Datatables.

One suggestion is to build a simple page with just the Datatables code to see if the problem occurs. if you still see the same problem please post a link to the simpler page. Using draw() or ajax.reload() can cause Datatables to go to the first page unless parameters are passed telling it to stay on the same page.

Let us know what you find.

Kevin

tomasfernandes

Yes, i've done those breakpoints as well, and when I remove de table draw of the child table that does not happens.

I've removed all the scripts from that page. So the only scripts there are this:

and the script that generates the tables and child table.

rf1234

Just noticed that Kevin already mentioned this - but anyway ... Maybe you overlooked it just like I did

You might have an ajax reload of that table in your code. In that case you need to make sure that paging is not reset on reload like this:

table.ajax.reload( null, false ); // user paging is not reset on reload

https://datatables.net/reference/api/ajax.reload()

Same with draw

table.draw( false );

https://datatables.net/reference/api/draw()

rf1234

Yes, i've done those breakpoints as well, and when I remove de table draw of the child table that does not happens.

Sounds like you just need to modify the draw() then.

tomasfernandes

How can I modify this in order to the page not changing?

I've tried to load the same json with data instead of ajax and the problem didn't occur.

kthorngren

Here is an example that is similar to yours with an ajax loaded child row. It doesn't revert back to the first page. Maybe it can help or maybe you can update it to replicate the issue.
http://live.datatables.net/raziweba/1/edit

Or can you update your test case to be a simpler page with just Datatables leaving out all the extra JS code, events, etc.

Kevin

tomasfernandes

Kevin, that's what I have right now, I only load the jquery and datatables scripts.
Still not working properly.

allan

You are going to have to give us a bit more if you would like us to be able to help . Kevin has kindly spent his time to write a working example, and your say your code is identical but not working, but there is obviously some difference. As Kevin said, please modify his example to show the issue or link to your own.

Allan

tomasfernandes

Sorry if I was somehow rude, that was not my intention at all, I really apreciate your help.

In Kevin's example I've tried to replicate what I have, but was not able to use the API i'm using (http://apitest.webgab.pt/licencas.json) due to cors policy, with data it works as in my website works.

I believe what is making the difference is something to do with that.

Because if I use data, it works.

kthorngren

Sorry, that last time I tried your link wasn't working so I didn't see the updated test case. I replicated your issue here:
http://live.datatables.net/raziweba/5/edit

It seems that Search Panes is refreshing the table. Comment out the line dom: 'Plfrtip', and the table stays on the same page. You have search Panes 1.2.1 and I updated the test case to use 1.2.2. I even tried the nightly version.

@sandy or @allan can help debug search panes to find out why its happening.

Kevin

tomasfernandes

Yes Kevin! It seems thats it, i've tried before to remove search panes to see if was that but never removed "dom" and "searchPanes" toghether. ( If I just remove "dom" the problem continues ).

Well, thank you! Let me know if you can figure it out whats wrong with it.

Best Regards,
Tomás

sandy

Hi @tomasfernandes , @kthorngren ,

Thanks for pointing this out to me!

I've taken a look at this this morning and have made a fix. The issue was that the child tables xhr was propagating up to the parent table and triggering SearchPanes listener. I've added a check in this listener to make sure that it is the correct table triggering the event before it runs.

I've updated your example so that you can see it working. This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

tomasfernandes

Great! Thank you all for your time and effort!

tomasfernandes

Hi there @sandy ! I think something at the nightly builds has changed, now i've problems in the tables that have Search Panes

What can I do?

Best Regards

sandy

Hi @tomasfernandes ,

The nightly builds currently have a prerelease of SearchPanes v2.0.0 - I suspect it is this change causing the issue. Could you create a test case so that we can debug the issue please? 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.

Thanks,
Sandy

tomasfernandes

You can check it out at https://www.parceiros.filosoft.pt
With login teste@filosoft.pt and password: Test@2021

then go to the page: https://www.parceiros.filosoft.pt/clientes
Or even: https://www.parceiros.filosoft.pt/licencas

sandy

Hi @tomasfernandes ,

Thanks for that. I can see the issue and am going to try and make a fix now.

Thanks,
Sandy

sandy

Hi @tomasfernandes ,

On second thoughts, would you mind updating to use the non minified version of DataTables please?

Thanks,
Sandy

tomasfernandes

No problem! Done

sandy

Hi @tomasfernandes ,

Something isn't right there. I've raised an issue internally (DD-2416 for my reference) and will report back here when there is an update.

Thanks,
Sandy

tomasfernandes

Ok @sandy, thank you.

If I use the 1.4.0 version of search panes the problem does not occur, but I don't know if that will fix my previous problem.

I'll wait for your feedback,

Best Regards,
Tomás Fernandes

tomasfernandes

Hey @sandy, do you have any feedback about this issue?

Thanks,
Tomás Fernandes

allan

Hi Tomás,

Sandy is on holiday at the moment and will be off until early in the New Year. He'll get back to you then.

Allan

tomasfernandes

Okay! Happy Holidays and Happy New Year!

sandy

Hi @tomasfernandes ,

That should be the issue fixed now. This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds. You may need to break the cache on your current script tag - just add ?audfbvuab or any other mash of letters to the end of the url.

Thanks,
Sandy