File
Add library
Share
Login or Register
Help
HTMLSaved
 
<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_id2" 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>
​
</body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
​
$(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]]
    });
   
   
   
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers