DataTables

DataTables Examples

HTML

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.min.css">
<script src="https://cdn.datatables.net/2.0.7/js/dataTables.js"></script>
<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">
    <thead>
        <tr><th>a1</th><th>b1</th><th>c1</th></tr>
        <tr><th>a1</th><th>b2</th><th>c2</th></tr>
    </thead>
  </table>
</div>
<button id="demo">Click me</button>

CSS

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}

JavaScript

const dataSet = [
    ["a", "b", "c"],
    ["a", "b", "c"],
    ["a", "b", "c"],
    ["a", "b", "c"],
    ["a", "b", "c"],
    ["a", "b", "c"],
  ];

  const columnDefs = [{
    title: "A"
  }, {
    title: "B",
    visible: false
  }, {
    title: "C",
  }];

  const myTable = $('#example').DataTable({
    data: dataSet,
    columns: columnDefs,
  });
  
  document.getElementById('demo').onclick = () => {
    alert("[" + myTable.columns(':visible').data().toArray() + "]");
  }