DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="example">
    <thead>
        <tr>
            <th>Employee</th>
        </tr>
    </thead>
   <!-- <tbody>
       <tr><td class="employee_identity"><span></span></td></tr>
       <tr><td class="employee_identity"><span></span></td></tr>
       <tr><td class="employee_identity"><span></span></td></tr>
       <tr><td class="employee_identity"><span></span></td></tr>
       <tr><td class="employee_identity"><span></span></td></tr>
      
    </tbody> -->
</table>

JavaScript

const employees = [ 
	{ val: "Tiger Nixon", order: "NixonTiger" },
  { val: "Garrett Winters", order: "WintersGarrett" },
  { val: "Ashton Cox", order: "CoxAshton" },
  { val: "Cedric Kelly", order: "KellyCedric" },
  { val: "Adrien Kelly", order: "KellyAdrien" }
];

const cells = {
	'data': [
  	['<span class="employee_display"></span>'],
    ['<span class="employee_display"></span>'],
  	['<span class="employee_display"></span>'],
  	['<span class="employee_display"></span>'],
  	['<span class="employee_display"></span>']
  ], 'attrib': [
  	{ classList: ['employee_identity'], dataset: { 'data-order': 'test' }},
  	{ classList: ['employee_identity'], dataset: { 'data-order': 'test' }},
  	{ classList: ['employee_identity'], dataset: { 'data-order': 'test' }},
  	{ classList: ['employee_identity'], dataset: { 'data-order': 'test' }},
  	{ classList: ['employee_identity'], dataset: { 'data-order': 'test' }},
  ]
};

let table = $('#example').DataTable({
	'data': cells.data,
  columnDefs: [{
			targets: '_all',
			createdCell: function(td, cellData, rowData, row) {
				$(td).addClass(...cells.attrib[row].classList);
				Object.keys(cells.attrib[row].dataset).map((key) => $(td).attr(key, cells.attrib[row].dataset[key]));
			}
	}], initComplete: function(settings) {
  	$('.employee_identity').each(function(index, node) {
			$(node).attr('data-order', employees[index].order);
  		$(node).find('span').append(employees[index].val);
		});

		this.api().cells('.employee_identity').invalidate('dom').draw();
	}
});