Destroy/clear Issue if we have same component multiple times in same page

Manikantha R · April 2023

I have one table component and I have authored same table component 3times in page now issue is when I tried to clear or destroy it's not working as expected

kthorngren · April 2023

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

Kevin

Manikantha R · April 2023

Hi Kevin,

Thanks for your response let me share the Test case I have HTML File like below

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css"/>
</head>
<body>
<table id="table_id" class="downloadHistroy" >
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>90</td>
<td>A+</td>
</tr>
<tr>
<td>Science</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>English</td>
<td>80</td>
<td>A</td>
</tr>
<tr>
<td>EVS</td>
<td>75</td>
<td>B+</td>
</tr>
<tr>
<td>History</td>
<td>70</td>
<td>B</td>
</tr>
</tbody>
</table>

<button class="btn-primary" onclick="myFunction()">Click me!</button>


<table id="table_id" class="downloadHistroy" >
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>90</td>
<td>A+</td>
</tr>
<tr>
<td>Science</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>English</td>
<td>80</td>
<td>A</td>
</tr>
<tr>
<td>EVS</td>
<td>75</td>
<td>B+</td>
</tr>
<tr>
<td>History</td>
<td>70</td>
<td>B</td>
</tr>
</tbody>
</table>

<button class="btn-primary" onclick="myFunction()">Click me!</button>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
  $("#table_id").DataTable();
});

function myFunction(){
  console.log("Inside the table");
  $(".downloadHistroy").DataTable().clear();
  $(".downloadHistroy").DataTable().destroy();
  $('.downloadHistroy').DataTable({ 
      "initComplete": function(settings, json) {
        console.log('DataTables has finished in base myfavoriteTable.js.');
      },

    //  serverSide: true,
      responsive: true,
      renderer: "bootstrap",
      pagingType: "full_numbers",
      paging: true,
      order: [[1, 'desc']],  
      pageLength: 4,
      lengthMenu: [[5, 6, 9, 12], [5, 6, 9, 12]]
    });
  
  
  
}
</script>
</body>
</html>

I have 2 tables with same ID when i click i am getting output like below.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · April 2023

Your HTML isn't valid. You have two elements with the same id. Fixing that appears to allow it to work as expected: https://live.datatables.net/benepugi/1/edit .

Allan

Manikantha R · April 2023

Hi allan,

Thanks for your quick response its solved my Issue

Destroy/clear Issue if we have same component multiple times in same page

Destroy/clear Issue if we have same component multiple times in same page

Answers

Howdy, Stranger!

Categories

DataTables

Destroy/clear Issue if we have same component multiple times in same page

Destroy/clear Issue if we have same component multiple times in same page

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables