Search code examples
htmljquerycodeigniter

My datatable is not working even though it is working on my onother page


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.

This is my activity.php And it's totally working here

This is my ewallet.php And it's not working. I just did the same thing as i did in activity.php. But data table is not working

//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)

Solution

  • 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>