newbie here. My datatable is not working. However, it is fully working on my another page. It is weird because I just did the same thing as I did before. Am I missing something here? I provided a more explanation, screenshot, and code below. Any help will be appreciated. Thank you so much.
//These codes are from ewallet.php. Data table here is not working
html:
<div class="card-body table-responsive p-0">
<!-- tab cont -->
<div class="tab-content" id="custom-tabs-two-tabContent">
<!-- PENDING -->
<div class="tab-pane fade show active" id="custom-tabs-two-pending" role="tabpanel" aria-labelledby="custom-tabs-two-pending-tab">
<table class="table-head-fixed text-nowrap table-striped" id="example"> // i triggered it here using id="example"
<thead>
<tr>
<th><i class="fas fa mr-2"></i>DATEE</th>
<th><i class="fas fa mr-2"></i>NAME</th>
<th><i class="fas fa mr-2"></i>AMOUNT</th>
<th><i class="fas fa mr-2"></i>STATUS</th>
<th><i class="fas fa mr-2"></i>ACTION</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<?php
foreach($result as $rows) { ?>
<?php if($rows->status==='pending'){ ?>
<tr>
<td><?php echo $rows->dateRequested; ?></td>
<td><?php echo $rows->firstname; ?></td>
<td><?=number_format($rows->amount, 2);?></td>
<td><?php echo $rows->status; ?></td>
<td>
<button data-mdb-toggle="tooltip" title="Hi! I'm tooltip" data-amounted="<?php echo $rows->amount?>" data-id="<?php echo $rows->userID; ?>" data-trans="<?php echo $rows->transID;?>" data-usernamee="<?php echo $rows->username; ?>" ustatus="approved" class="btn-sm showmodal fundTable btn btn-success text-bold user_status">
<i class="fas fa-check-square"></i></button>
<button data-id="<?php echo $rows->transID;?>" data-us="<?php echo $rows->userID?>" class="showmodal1 fundTable btn btn-danger btn-sm text-bold">
<i class="fas fa-window-close"></i>
</button>
<button data-id="<?php echo $rows->transID?>" data-amounts="<?php echo $rows->amount?>" data-stats="<?php echo $rows->status?>" data-type="<?php echo $rows->account_type?>" data-use="<?php echo $rows->username?>" data-user="<?php echo $rows->userID; ?>" data-toggle="modal" data-target="#infos" class="showmodal9 fundTable btn btn-info btn-sm text-bold">
<i class="fas fa-info-circle"></i>
</button>
<?php } ?>
<?php } ?>
</td>
</tr>
</tbody>
</table>
</div>
script:
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="far fa-copy mr-2"></i>Copy',
titleAttr: 'Copy'
},
{
extend: 'excelHtml5',
text: '<i class="fas fa-file-excel mr-2"></i> Excel',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fas fa-file-csv mr-2"></i> CSV',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="far fa-file-pdf mr-2"></i> PDF',
titleAttr: 'PDF'
},
{
extend: 'printHtml5',
text: '<i class="fas fa-print mr-2"></i> Print',
titleAttr: 'PRINT'
}
]
} );
} );
</script>
Console Log errors:
Uncaught TypeError: Cannot read property 'getContext' of undefined
at HTMLDocument.<anonymous> (dashboard.js:68)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
jquery.min.js:2 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at Za (jquery.dataTables.min.js:41)
at ea (jquery.dataTables.min.js:32)
at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:33)
at jquery.min.js:2
at Function.map (jquery.min.js:2)
at k.fn.init.map (jquery.min.js:2)
at Ga (jquery.dataTables.min.js:33)
at f (jquery.dataTables.min.js:109)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:110)
at Function.each (jquery.min.js:2)
Looks like there is some extra TR in your code:
<tr> **Extra TR first one after tbody**
<?php
foreach($result as $rows) { ?>
<?php if($rows->status==='pending'){ ?>
<tr>
<td><?php echo $rows->dateRequested; ?></td>
<td><?php echo $rows->firstname; ?></td>
<td><?=number_format($rows->amount, 2);?></td>
<td><?php echo $rows->status; ?></td>
<td>
<button data-mdb-toggle="tooltip" title="Hi! I'm tooltip" data-amounted="<?php echo $rows->amount?>" data-id="<?php echo $rows->userID; ?>" data-trans="<?php echo $rows->transID;?>" data-usernamee="<?php echo $rows->username; ?>" ustatus="approved" class="btn-sm showmodal fundTable btn btn-success text-bold user_status">
<i class="fas fa-check-square"></i></button>
<button data-id="<?php echo $rows->transID;?>" data-us="<?php echo $rows->userID?>" class="showmodal1 fundTable btn btn-danger btn-sm text-bold">
<i class="fas fa-window-close"></i>
</button>
<button data-id="<?php echo $rows->transID?>" data-amounts="<?php echo $rows->amount?>" data-stats="<?php echo $rows->status?>" data-type="<?php echo $rows->account_type?>" data-use="<?php echo $rows->username?>" data-user="<?php echo $rows->userID; ?>" data-toggle="modal" data-target="#infos" class="showmodal9 fundTable btn btn-info btn-sm text-bold">
<i class="fas fa-info-circle"></i>
</button>
<?php } ?>
<?php } ?>
</td>
</tr>