<table id="tbl" class="display dataTable table-responsive text-center">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Student Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>Contact</th>
            <th>Student profile</th>
        </tr>
    </thead>
    <tbody>
        <?php if (isset($studentData) && !empty($studentData)) {
            foreach ($studentData as $sData) { ?>
                <tr>
                    <td><?= $sData['studentId']; ?></td>
                    <td>
                        <div class="student_name"><?= $sData['name']; ?></div>
                    </td>
                    <td><?= $sData['course_name']; ?></td>
                    <td><?= $sData['section_name']; ?></td>
                    <td><?= $sData['mobile']; ?></td>
                    <td>
                        <div>
                            <a href="<?= base_url(); ?>students-info/<?= $sData['id']; ?>">
                                <div class="sub_editbtn"><i class="fas fa-user"></i></div>
                            </a>
                        </div>
                    </td>
                </tr>
        <?php }
        } ?>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $('.user-drpdown').click(function() {
            $('.drpdown-items').toggle();
        });
    });

    //table js
    $('#tbl').DataTable({
        "lengthMenu": [
            [50, 100, 250, 500, -1],
            [50, 100, 250, 500, "All"]
        ]
    });
    //table js end

    //multiple select js start
    $('select').selectpicker();
    //multiple select js end
</script>