 
<table class="table table-striped table-bordered" id="table-artikel-csrf">
    <thead>
        <tr>
           <th> No </th>
           <th> Barcode </th>
           <th> Nama Barang </th>
           <th> Kategori </th>
           <th> Harga Beli </th>
           <th> Harga Jual </th>

           <th> Aksi </th>
       </tr>
   </thead>
   <tbody></tbody>
</table>

<script type="text/javascript" src="<?php echo base_url();?>assets/barang/jquery.js"></script>
<script src="<?php echo base_url();?>asset/barang/bootstrap.min.js"></script>
<!-- DATATABLES BS 4-->
<script src="<?php echo base_url();?>assets/barang/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>assets/barang/dataTables.bootstrap4.min.js"></script>
<script src="<?php echo base_url();?>assets/barang/dataTables.responsive.min.js"></script>
<script src="<?php echo base_url();?>assets/barang/responsive.bootstrap4.min.js"></script>
<!-- Datatable config -->
<script>
    var tabel = null;
    var token = "<?php echo $this->security->get_csrf_hash();?>";
    $(document).ready(function() {
        tabel = $('#table-artikel-csrf').DataTable({
            "processing": true,
            "responsive":true,
            "serverSide": true,
                    "ordering": true, // Set true agar bisa di sorting
                    "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
                    "ajax":
                    {
                        "url": "<?= base_url('datatables/view_data_query_csrf');?>", // URL file untuk proses select datanya
                        "type": "POST",
                        // csrf datatable
                        "data": function ( d ) {
                            d.<?php echo $this->security->get_csrf_token_name();?> = token;
                        }
                    },
                    "deferRender": true,
                    "aLengthMenu": [[30, 50, 100],[ 30, 50, 100]], // Combobox Limit
                    "columns": [
                        {"data": 'nama_barang',"sortable": false, 
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }  
                    },
                        { "data": "barcode_ecer" },  // Tampilkan kategori
                        { "data": "nama_barang" },  // Tampilkan kategori
                        { "data": "nama_katagori" },  // Tampilkan kategori
                        { "data": "harga_beli_ecer" ,render: $.fn.dataTable.render.number(',', '.', '')},  // Tampilkan kategori
                        { "data": "harga_jual_ecer" ,render: $.fn.dataTable.render.number(',', '.', '')},  // Tampilkan nama sub kategori
                        { "data": "barcode_ecer",
                        "render": 
                        function( data, type, row, meta ) {
                             return '<a target="blank"  href="'+"<?php echo base_url();?>"+'barang/form_edit_new/'+data+'">Ubah</a> | <a   href="'+"<?php echo base_url();?>"+'barang/code_hapus_baru/'+data+'" onclick="return confirm(\' Apakah Kamu Yakin Hapus Data ini '+data+'\');"   >Hapus</a>  ';
                        }
                    },
                    ],
                });
                // csrf datatable
        table.on('xhr.dt', function ( e, settings, json, xhr ) {
            token = json.<?=$this->security->get_csrf_token_name();?>;
        } );
    });
</script>
