datatable-reorder-fixed

Datatable sample with col reorder & fixed cols

by priteshmhatre

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.6/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.6/css/colReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Symbol</th>
                <th>Ltp</th>
                <th>Buy</th>
                <th>Change</th>
                <th>Remove</th>
            </tr>
        </thead>
    </table>

CSS

#example td {
  vertical-align: center;
}

JavaScript

let counter = 1;

function simulateLivePrices() {
	const table = $('#example').DataTable();
	const rndLtp = Math.round(Math.random() * 100) / 100;
	const rndChg = Math.round(Math.random() * 100) / 100;
	table.row(0).data({
		symbol: 'SBIN',
		ltp: rndLtp,
		change: rndChg
	});
	table.row(1).data({
		symbol: 'LT',
		ltp: rndLtp,
		change: rndChg
	});
}
$(document).ready(function() {
	const table = $('#example').DataTable({
		searching: false,
		paging: false,
		columns: [{
			data: "symbol"
		}, {
			data: "ltp"
		}, {
			data: null
		}, {
			data: "change"
		}, {
			data: null
		}],
		columnDefs: [{
			targets: 2,
			data: null,
			defaultContent: '<button name="buy">Click!</button>',
		}, {
			targets: -1,
			data: null,
			defaultContent: '<button name="DELETE">Click!</button>',
		}],
	});
	$('#example tbody').on('click', 'button', function() {
  	// User needs to click multiple times to have the click event called
		console.log('clicked: ' + counter++);
	});
	// Add dummy data
	table.row.add({
		symbol: 'SBIN',
		ltp: 332222222223.2,
		change: 0.222222222
	}).draw();
	table.row.add({
		symbol: 'LT',
		ltp: 3122222222223.2,
		change: 0.2222222222
	}).draw();
	// Simulate live prices
  // The faster the prices are updated, it results in more misses of click event
	setInterval(simulateLivePrices, 230);
});