HTML
<div class="row">
<div class="col-sm-12">
<h4>Order details</h4>
<table id="orders-table" class="table table-striped table-bordered table-hover settings">
<thead>
<tr>
<th>S.No.</th>
<th>Date</th>
<th>OID</th>
<th>TID</th>
<th>CID</th>
<th>Consumer Name</th>
<th>GMV</th>
<th>Brand</th>
<th>SKU</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
JAVASCRIPT
$(document).ready(function () {
//Once the document is ready call Bind DataTable
console.log("orders");
ordersTable();
});
function ordersTable() {
// var transactions = [[${transactions}]];
var table = $('#orders-table').DataTable({
"pageLength": 5,
"lengthChange": false,
data: orders,
columns: [
{ "data": null},
{ "data": "createdDate",
"render": function (data) {
var date = new Date(data);
var month = date.getMonth() + 1;
return date.getDate() + "/" + (month.toString().length > 1 ? month : "0" + month) + "/" + date.getFullYear();
}
},
{ "data": "id" },
{ "data": "transactionId" },
{ "data": "userId" },
{ "data": "consumerName" },
{ "data": "totalPrice" },
{ "data": "brandName" },
{ "data": "productName" }
]
});
table.on( 'order.dt search.dt', function () {
table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
}
RESULT
