$(document).ready(function() { setTimeout(function() { // [ Add Rows ] var t = $('#add-row-table').DataTable(); var counter = 1; $('#addRow').on('click', function() { t.row.add([ counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5' ]).draw(false); counter++; }); $('#addRow').click(); // [ Individual Column Searching (Text Inputs) ] $('#footer-search tfoot th').each(function() { var title = $(this).text(); $(this).html(''); }); var table = $('#footer-search').DataTable(); // [ Apply the search ] table.columns().every(function() { var that = this; $('input', this.footer()).on('keyup change', function() { if (that.search() !== this.value) { that .search(this.value) .draw(); } }); }); // [ Individual Column Searching (Select Inputs) ] $('#footer-select').DataTable({ initComplete: function() { this.api().columns().every(function() { var column = this; var select = $('') .appendTo($(column.footer()).empty()) .on('change', function() { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function(d, j) { select.append('') }); }); } }); var srow = $('#row-select').DataTable(); $('#row-select tbody').on('click', 'tr', function() { $(this).toggleClass('selected'); }); var drow = $('#row-delete').DataTable(); $('#row-delete tbody').on('click', 'tr', function() { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { drow.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $('#row-delete-btn').on('click', function() { drow.row('.selected').remove().draw(!1); }); function format(d) { return '
Full name: | ' + '' + d.name + ' | ' + '
Extension number: | ' + '' + d.extn + ' | ' + '
Extra info: | ' + 'And any further details here (images etc)... | ' + '