<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body"> 
                <style type="text/css">     
                    #datatable-applications thead tr th:nth-child(1), #datatable-applications tbody tr td:nth-child(1) {width: 4% !important; text-align: center;}
                    #datatable-applications thead tr th:nth-child(2), #datatable-applications tbody tr td:nth-child(2) {width: 15% !important; text-align: left;}
                    #datatable-applications thead tr th:nth-child(3), #datatable-applications tbody tr td:nth-child(3) {width: 15% !important; text-align: left;}
                    #datatable-applications thead tr th:nth-child(4), #datatable-applications tbody tr td:nth-child(4) {width: 18% !important; text-align: left;}
                    #datatable-applications thead tr th:nth-child(5), #datatable-applications tbody tr td:nth-child(5) {width: 12% !important; text-align: center;}
                    #datatable-applications thead tr th:nth-child(6), #datatable-applications tbody tr td:nth-child(6) {width: 12% !important; text-align: center;}
                    #datatable-applications thead tr th:nth-child(7), #datatable-applications tbody tr td:nth-child(7) {width: 10% !important; text-align: center;}
                    #datatable-applications thead tr th:nth-child(8), #datatable-applications tbody tr td:nth-child(8) {width: 8% !important; text-align: center;}
                    #datatable-applications thead tr th:last-child, #datatable-applications tbody tr td:last-child {text-align: center; width: 12% !important;}
                </style>
                <table id="datatable-applications" class="table table-hover table-bordered dt-responsive nowrap">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Name</th>
                            <th>Applied For</th> 
                            <th>Email</th>   
                            <th>Mobile</th> 
                            <th>Location</th>  
                            <th>Experience</th> 
                            <th>Resume</th>
                            <th>Applied Date</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                </table>
            </div>
        </div>
    </div>  
</div>

<script type="text/javascript">
var table;

$(document).ready(function() {
   
    table = $('#datatable-applications').DataTable({ 
        "processing": true,
        "serverSide": true,
        "order": [[8, 'desc']],
        "ajax": {
            "url": "<?php echo base_url('career/applications_list'); ?>",
            "type": "POST"
        },
        "columnDefs": [{
            "targets": [-1, -2],
            "orderable": false,
        }],
    });
});
</script>

<?php $this->load->view('includes/footer'); ?>
</body>
</html>