DataTable demo

by kapantzak

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/sl-1.2.5/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/sl-1.2.5/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<div id="wrapper" class="col-xs-12">
  <table id="myTable" class="table">
  </table>
</div>

CSS

#wrapper {
  margin-top:15px;
}

.marginLeft-sm {
    margin-left: 5px;
}

.marginLeft-md {
    margin-left: 10px;
}

.marginLeft-lg {
    margin-left: 20px;
}

.marginBottom-sm {
    margin-bottom: 5px;
}

.marginBottom-md {
    margin-bottom: 15px;
}

.marginBottom-lg {
    margin-bottom: 30px;
}

JavaScript

$(document).ready(() => {
	initDataTables(data);
});

let data = [];
for (let i = 1; i<=50;i++) {
	let date = moment('2018-04-01').add(i, 'days');
	data.push({
  	ID: i,
    Date: {
    	render: date.format('DD/MM/YYYY'),
      sort: date.valueOf()
    },
    Descr: 'Description of index ' + i
  });
}

let buttons = [
    	{
      	text: 'Add',
        className: 'btn btn-success',
        action: () => {
        	alert('Added');
        }
      },
      {
      	text: 'Edit',
        className: 'btn btn-warning',
        action: () => {
        	alert('Edit');
        }
      },
      {
      	text: 'Delete',
        className: 'btn btn-danger',
        action: () => {
        	alert('Delete?');
        }
      },
      {
      	text: 'Action with long text',
        className: 'btn btn-default',
        action: () => {
        	alert('Action');
        }
      }
    ];

let initDataTables = (data) => {
	let tbl = $('#myTable');
  if (tbl.hasClass('dataTable')) {
  	tbl.DataTable().destroy();
  }
  tbl.DataTable({  	
    dom: "<'row'<'col-sm-6'B><'col-sm-6'<'pull-right marginLeft-lg'l>f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  	data: data,
    order: [[2, 'asc']],
    lengthMenu: [[10, 50, -1], [10, 50, 'All']],
    select: 'single',
    buttons: buttons,
    columnDefs: [{
      orderable: false,
      targets: 0
    }],
    columns: [
    	{
      	data: null,
        className: 'text-center select-checkbox',
        title: '<input id="chkSelectAll" type="checkbox" />',
        render: (data, type, full, meta) => ''
      },
    	{
      	data: 'ID',
        title: 'ID'
      },
      {
      	data: 'Date',
        title: 'Date',
        render: {
        	'_': 'render',
          sort: 'sort'
        }
      },
      {
      	data: 'Descr',
        title: 'Description'
      }
    ]
  })
};

$(document).on('change', '#chkSelectAll', (e) => {
	let rows = $('#myTable').find('tbody').find('tr');
	let chk =...