The Small Notes

Sambungan dari artikel sebelumnya mengenai Datatables Server Side. Kali ini kita mencoba untuk membuat datatables server side yang menggunakan button edit atau delete. Sehingga sangat berguna untuk sebuah data table yang ditampilkan dan memerlukan perubahan atau penghapusan data row.

Pertama kita download dulu file library nya (https://drive.google.com/file/d/1cDmsSRTme70CHkwJxRF4Wu7OXqgeCuvU/view?usp=sharing)
Code Controller

function transaction_out_sparepart()
	{
		$this->load->view('include/header');			
		$this->load->view('page_transaction/V_transaction_out_sparepart');
		$this->load->view('include/footer');
	}

public function get_sp()
	{
	    $this->load->library('Datatables');
	    $warehouse_code = $this->session->userdata('employee_warehouse');
	    $array = array('warehouse_code' => $warehouse_code, 'stock !=' => 0);
            $this->datatables->select('no_barang, nama_barang')->from('vw_sparepart')->where($array);
            $this->datatables->add_column('edit', '<a href="../add_cart/$1">Edit</a>', 'no_barang');
            echo $this->datatables->generate();
	}

Code Pada View

	<title>Transaction Sparepart Out List</title>
	<link rel="stylesheet" href="<?php echo base_url(); ?>asset/css/table.css">
	<link href="<?php echo base_url('asset/datatables_serverside/datatables/css/jquery.dataTables.min.css')?>" rel="stylesheet">
</head>
<body>
<div class="containerweb">

	<?php echo $this->session->flashdata('msg');?>
	<div style="height:30px;"><b>DAFTAR TRANSAKSI PENGELUARAN BARANG :</b></div>

	<div style="overflow-x:auto;">
	    <table id="table" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
    			<th>Kode Barang</th>
    			<th>Nama Barang</th>
    			<th>Edit</th>
    		</tr>
            </thead>
        </table>
	</div>
	</div>

</div>
</body>
<footer>
    <script src="<?php echo base_url('asset/datatables_serverside/jquery/jquery-2.2.3.min.js')?>"></script>
    <script src="<?php echo base_url('asset/datatables_serverside/datatables/js/jquery.dataTables.min.js')?>"></script>
	<script type="text/javascript">
    var table;
    $(document).ready(function() {
 
        //datatables
        table = $('#table').DataTable({ 
 
            "processing": true, 
            "serverSide": true, 
            "order": [], 
             
            "ajax": {
                "url": "<?php echo site_url('Transaction/get_sp')?>",
                "type": "POST"
            },
             
            "columnDefs": [
            { 
                "targets": [ 0 ], 
                "orderable": false,
            },
            ],
            
            "columns": [
            {"data": "no_barang" },
            {"data": "nama_barang" }
            {"data": "edit"}
       
        ]
 
        });
 
    });
 
</script>

Selesai, datatables server side telah memiliki button edit yang keynya ada pada nomor barang.