Hello everyone I am newbie to datatable and recently working with it, but I am facing some issues with it.

I have initialized a datatable as below:

<table class="table" id="complaint-table">
    <thead>
        <tr>
            <th>Job Card No.</th>
            <th class="text-center">Status</th>
            <th class="text-center">Opened On</th>
            <th>Closed On</th>
            <th>Vehicle No.</th>
            <th>Complaint Type</th>
            <th>Workshop Name</th>
            <th>Estimated Time</th>
            <th>Time Taken</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
                                                        
        <?php  foreach($complaints as $value)
        { ?>
        <tr>
            <td><span class="job-card-no">2344</span></td>
            <td class="text-center"><span class="status-chip status-purple">Open</span></td>
            <td class="text-center">22/1/2023</td>
            <td>-</td>
            <td>GJ 06 VM 4567</td>
            <td>Complaint</td>
            <td>Workshop Name 1</td>
            <td>2:00 PM</td>
            <td>-</td>
            <td>
                <span><a href="#" class="btn table-btn table-blue-border-btn">Edit</a></span>
                <span><a href="#" class="btn table-btn table-blue-btn">View</a></span>
            </td>
        </tr>
    <?php } ?>
        
   </tbody>
</table>
<script>
$(document).ready(function()
      {
         $.noConflict();
   
         var table = $('#complaint-table').DataTable(
         {
            'paging': true,
            
            "pageLength": 5
                    
         });
      });

     </script>

Datatable is working perfectly but while clicking on page link it redirects to URL like this: http://localhost/aofs/undefined. its shows an undefined page. please anyone have any idea about this issue?