jQuery toggleClass example

Toggle class name on click in jQuery

by Bruno42

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="data" border="1">
  <thead>
    <tr><th>Col A</th><th>Col B</th></tr>
  </thead>
  <tbody>
    <tr><td>Entry 1</td><td>Test 1</td></tr>
    <tr><td>Entry 2</td><td>Test 2</td></tr>
    <tr><td>Entry 3</td><td>Test 3</td></tr>
  </tbody>
</table>

<input type="button" id="reload" value="Add Data and Reload" />

CSS

* { font-size: 15px; font-family: Arial; text-align: center; }
table tr td { padding: 5px; }
table tr th { background: #fff7dd; }
input[type=button] { width: 200px; margin: 20px auto; background: #CC0000; color: white; padding: 10px; }

JavaScript

$(document).ready(function() {
	$('#data').DataTable();
});

$('#reload').on('click', function() {
	$('#data tbody').append('<tr><td>Entry 4</td><td>Test 4</td></tr>');
  alert('Line 4 was added');
  //$('#data').DataTable().draw().rows().invalidate().draw();
  //$('#data').DataTable().ajax.reload();
  $('#data').DataTable().data.reload().draw();
});