dataTable search breaks after cloning dataTable

phani_kumar

Hi. I am trying to clone JQuery dataTable and set it into a different div in another page. But the dataTable search does not work after I clone and it only works when I refresh the page. Can you please let me know if there is a workaround.

kthorngren

Why are you trying to clone Datatables instead of initializing Datatables?

The Datatables initialization process sets up all the event handlers and build the Datatables data cache which are both needed for Datatables operation. You should just initialize Datatables.

Kevin

phani_kumar

Thanks for your reply Kevin. I tried the other way you told to initialize the dataTable.
There is some code executed in another page (JSP) that has the HTML (div and a table inside). In the other page, I am trying to initialize this HTML table as a dataTable and still the search does not work. Here is my code that I have for initialization.
$('.myTableClass').dataTable( { autoWidth: false, "paging": false, columnDefs: [ { targets: [0], visible: false } ], rowGroup: { dataSrc: [0] }, "order": [[1, "asc"]] } );

kthorngren

I am trying to initialize this HTML table as a dataTable and still the search does not work.

Can you provide a link to your page are a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Do you get errors in the browser's console?

Kevin

phani_kumar

Hi. I don't get any console errors.
Also I tried to replicate the test in the link you provided but I am getting some console errors while trying to replicate. Kindly see my scenario if that helps you understand more or I will try replicating again.
So I have this HTML output from the other JSP page say details.jsp that is rendered when we click on a hyperlink.
<div id="table1" class="container" style="display: block"> <table width="100%" class="table group"> <thead> <tr> <th>Group</th> <th>Name</th> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>phani</td> <td>100</td> <td>Invoice</td> </tr> <tr> <td>2</td> <td>jasprit</td> <td>200</td> <td>Payment</td> </tr> </tbody> </table> </div>
And then there is my view page called "viewDetails.jsp" where I call the "details.jsp" on "document ready". In "viewDetails.jsp", I initialise the dataTable by the dataTable class "group".
$('.group').dataTable( { autoWidth: false, "paging": false, columnDefs: [ { targets: [0], visible: false } ], rowGroup: { dataSrc: [0] }, "order": [[1, "asc"]] } );
And after initialing the dataTable in "document ready", I clone the HTML of the "details.jsp" and set this HTML into another div in "ViewDetails.jsp". The HTML is now rendered into the new div but the dataTable "search" breaks.
Sorry for such a long message but I will try again to replicate it.

phani_kumar

Hi. Due to a time deadline I had to change my plan to not to clone the dataTable and revert my code to how it was before. But I would back later as the cloning approach would help me make my page render faster.

allan

Cloning an already initialised DataTable (i.e. with the DOM .clone() method - which I presume is what you mean) is not going to work. Create a new table and initialise DataTables on it as normal. Use JS and the DataTables API if you want to keep the insync.

For more than that, as Kevin said, we'd need a test case.

Allan