DataTables

DataTables Examples

by kapantzak

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
<div class="container">
  <table id="example">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

JavaScript

$(document).ready(function() {

	var dataset = [
  	{ 
    	dateData_1: 'Date A1',
      dateData_2: 'Date A2',
      dateData_3: 'Date A3',
      dateData_4: 'Date A4',
      dateData_5: 'Date A5',
    },
    { 
    	dateData_1: 'Date B1',
      dateData_2: 'Date B2',
      dateData_3: 'Date B3',
      dateData_4: 'Date B4',
      dateData_5: 'Date B5',
    },
    { 
    	dateData_1: 'Date C1',
      dateData_2: 'Date C2',
      dateData_3: 'Date C3',
      dateData_4: 'Date C4',
      dateData_5: 'Date C5',
    },
    { 
    	dateData_1: 'Date D1',
      dateData_2: 'Date D2',
      dateData_3: 'Date D3',
      dateData_4: 'Date D4',
      dateData_5: 'Date D5',
    },
    { 
    	dateData_1: 'Date E1',
      dateData_2: 'Date E2',
      dateData_3: 'Date E3',
      dateData_4: 'Date E4',
      dateData_5: 'Date E5',
    }
  ]

	var columns = [];  
  for (var i = 1; i <= 5; i++) {  	
    var date = new Date(2019,1,i);
  	columns.push({
    	title: date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear(),
      data: 'dateData_' + i
    });
  }

  var myTable = $('#example').DataTable({    
    data: dataset,
    columns: columns
  });

});