JSFiddle - React, Tailwind, and code Playground
HTML
<table id="transactionTbl" class="table table-bordered">
<thead>
<tr>
<th>Transaction ID</th>
<th>Sr No.</th>
<th>Investor Name</th>
<th>Borrower Name</th>
<th>Amount</th>
<th>Financial Year</th>
<th>Start Date</th>
<th>Due Date</th>
<th>Period</th>
<th>Status</th>
</tr>
</thead>
</table>
JavaScript
// $(document).ready(function() {
// $('#transactionTbl').dataTable( {
// "processing": true,
// "serverSide": false,
// "ajax": "<?php echo $this->config->base_url('api/transactionList')?>",
// "columns":[
// { data: 'T_Id' },
// { data: 'T_Sr'},
// { data: 'I_Id' },
// { data: 'B_Id' },
// { data: 'amount'},
// { data: 'financial_year' },
// { data: 'start_date'},
// { data: 'due_date'},
// { data: 'period'},
// { data: 'status'}
// ]
// } );
// } );
var oTable;
$( document ).ready(function() {
$.ajax({
type: "GET",
url: "<?php echo $this->config->base_url('api/transactionList')?>",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result);
oTable = $('#transactionTbl').DataTable({
data: result,
columns: [
{ data: 'T_Id' },
{ data: 'T_Sr'},
{ data: 'invName' },
{ data: 'borrName' },
{ data: 'amount'},
{ data: 'financial_year' },
{ data: 'start_date'},
{ data: 'due_date'},
{ data: 'period'},
{ data: 'status'}
]
});
},
error: function (err) {
alert("err");
}
});
});