@include('layouts.header')

    <div class="container">
        <div class="card">
            <h1>List of Designation</h1>
        <table class="table table-striped" id="designation">
            <thead>
             <tr>
                <th>ID</th>
                <th>Desg Name</th>
                <th>Department</th>
            </tr>
            </thead>
            <tbody>
            @foreach($desg as $dg)  
             <tr>
                <td>{{$dg->id}}</td>
                <td>{{$dg->name}}</td>
                <td>{{$dg->dept_name}}</td>
              </tr>
            @endforeach
        </tbody>
    </table>
    </div>
</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.css" rel="stylesheet"> 
 <script src="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.js"></script>
<script>
      $(document).ready(function() {
        dataTable = $("#designation").DataTable({
      /*"columnDefs": [
            {
             "targets":[0],
             "visible": false,
             "searchable":false
            }
        ]*/
       });
           // Log the table data for debugging
    console.log(table.rows().count());

    });
    </script>
    @include('layouts.footer')