<style>
    th,
    td {
        white-space: nowrap;
    }

    div.dataTables_wrapper {
        margin: 0 auto;
    }
</style>
<table id="list_data" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr class="bg-tr">
            <th class="text-center">NO</th>
            <th class="text-center text-uppercase"><?= $this->lang->line('nik') ?></th>
            <th class="text-center text-uppercase" valign="middle"><?= $this->lang->line('nama_karyawan') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('gelar_depan') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('gelar_belakang') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('jabatan') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('cabang') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('departemen') ?></th>
            <th class="text-center text-uppercase">STATUS</th>
            <th class="text-center text-uppercase"><?= $this->lang->line('tgl_aktif_bekerja') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('tgl_berhenti_bekerja') ?></th>
            <th class="text-center text-uppercase">JOIN DATE</th>
            <th class="text-center text-uppercase">USERNAME</th>
            <th class="text-center text-uppercase"><?= $this->lang->line('jatah_cuti') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('jenis_kelamin') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('tempat_lahir') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('tgl_lahir') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('alamat') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('agama') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('no_telp') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('email') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('no_ktp') ?></th>
            <th class="text-center text-uppercase"><?= $this->lang->line('aksi') ?></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script type="text/javascript">
    $(function() {
        list_data = $('#list_data').DataTable({
            'searching': true,
            'paging': true,
            'lengthChange': true,
            'ordering': true,
            'info': true,
            'scrollX': true,
            'scrollCollapse': true,
            'fixedColumns': {
                'leftColumns': 3,
            },
            <?php if ($this->code_lang == 'id') {
                echo "
                'language': {
                    'url': '" . base_url("assets/plugins/datatables/dataTables-language-id.json") . "',
                    'sEmptyTable': 'Tidak ada data untuk ditampilkan'
                },";
            }; ?> "processing": true,
            "serverSide": true,
            "order": [],

            "ajax": {
                "url": "<?= route('karyawan.import.listdata') ?>",
                "type": "POST",
                "complete": function(data) {
                    reconfigure(data);
                }
            },

            "aoColumnDefs": [{
                    "aTargets": [0],
                    "bSortable": false
                },
                {
                    "aTargets": [1],
                    "bSortable": true
                },
                {
                    "aTargets": [2],
                    "bSortable": true
                },
                {
                    "aTargets": [3],
                    "bSortable": false
                },
                {
                    "aTargets": [4],
                    "bSortable": false
                },
                {
                    "aTargets": [5],
                    "bSortable": false
                },
                {
                    "aTargets": [6],
                    "bSortable": false
                },
                {
                    "aTargets": [7],
                    "bSortable": false
                },
                {
                    "aTargets": [8],
                    "bSortable": false
                },
                {
                    "aTargets": [9],
                    "bSortable": false
                },
                {
                    "aTargets": [10],
                    "bSortable": false
                },
                {
                    "aTargets": [11],
                    "bSortable": false
                },
                {
                    "aTargets": [12],
                    "bSortable": false
                },
                {
                    "aTargets": [13],
                    "bSortable": false
                },
                {
                    "aTargets": [14],
                    "bSortable": false
                },
                {
                    "aTargets": [15],
                    "bSortable": false
                },
                {
                    "aTargets": [16],
                    "bSortable": false
                },
                {
                    "aTargets": [17],
                    "bSortable": false
                },
                {
                    "aTargets": [18],
                    "bSortable": false
                },
                {
                    "aTargets": [19],
                    "bSortable": false
                },
                {
                    "aTargets": [20],
                    "bSortable": false
                },
                {
                    "aTargets": [21],
                    "bSortable": false
                },
                {
                    "aTargets": [-1],
                    "bSortable": false
                }

            ],
            "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                $('td:eq(0)', nRow).css({
                    'text-align': 'center'
                });
            },
        });
    });
</script>
