simpro-rssa/app/ship_setting/tabel.php

<?php 
include('../koneksi.php'); 
?>

<script type="text/javascript">$("#tabel_data_ship_setting").DataTable({"stateSave": true,"paging": true,"lengthChange": true,"searching": true,"ordering": false,"info": true,"autoWidth": false,lengthMenu: [
            [100, -1],
            [100, 'All']
        ]});</script>
<table id="tabel_data_ship_setting"  class="table table-striped table-condensed table-bordered" cellpadding="1" 
style="font-family:'RubReg';font-size:13px"
 >
                                <thead>
                                <tr style="text-align:center;color:black;font-weight:bold">
                                	<td width="30">No</td>
                                    <td>Berkas</td>
                                	<td width="10px;">#</td>
                                	<td width="100px;">DALAM NEGERI</td>
                                	<td width="100px;">LUAR NEGERI</td>
                                    <td align="center" width="70px;">Tools</td>
                                </tr>
                                </thead>
                                <tbody style="color:black">
                                <?php
                                	$no=1;
                                    $data = pg_query("SELECT id,berkas,dn,ln FROM syarat_ship ORDER BY id ASC");
                                    while($row=pg_fetch_array($data)) {
                                    $dn=$row['dn'];
                                    $ln=$row['ln'];
                                ?>
                                <tr>
                                    <td class="kiri" align="center"><?php echo $no; ?></td>
                                	<td><?php echo $row['berkas']; ?></td>
                                	<td align="center">
										<button type="button" name="file_contoh" style="height:22px;"class="btn btn-default btn-xs file_contoh" 
                                         	id="<?php echo $row['id'];?>" data-content="Upload Contoh Dokumen" 
                                            rel="popover" data-placement="top" data-trigger="hover">
											<i class="fa fa-file m-r-5"></i>
										</button>
									</td>
                                	<td align="center" style="color:red" class="ch_dn" id="<?php echo $row['id'];?>"><?php if ($dn=='y') { ?><i class="fa fa-check"></i><?php } else {} ?></td>
                                	<td align="center" style="color:red" class="ch_ln" id="<?php echo $row['id'];?>"><?php if ($ln=='y') { ?><i class="fa fa-check"></i><?php } else {} ?></td>
                                    <td class="kanan" align="center">
                                        <button type="button" name="edit_ship_setting" style="height:22px;" class="btn btn-teal btn-xs edit_ship_setting" id="<?php echo $row['id'];?>" data-content="Edit Data" rel="popover" data-placement="top" data-trigger="hover">
                                            <i class="fa fa fa-pencil"></i>
                                        </button>
                                        <button type="button" name="delete_ship_setting" style="height:22px;"class="btn btn-danger btn-xs delete_ship_setting" id="<?php echo $row['id'];?>" data-content="Hapus" rel="popover" data-placement="top" data-trigger="hover">
                                            <i class="fa fa-remove"></i>
                                        </button> 
                                    </td>
                                </tr>
                                <?php 
                                    	$no++;
                                    } 
                                ?>                       
                                </tbody>
                            </table>

                            

<script type="text/javascript">
$('button[name="file_contoh"]').popover();
$('button[name="edit_ship_setting"]').popover();
$('button[name="delete_ship_setting"]').popover();

  $("#tabel_data_ship_setting").on('click','.ch_dn',function(){
     var key = "ch_dn";
     var syarat_ship_id = $(this).attr('id');
     $.ajax({
        type: "POST",
        url: "app/ship_setting/crud.php",
        data: 'syarat_ship_id='+syarat_ship_id
        +'&key='+key,
        success: function(data){
          $('#tabel_ship_setting').load("app/ship_setting/tabel.php");
         }
      });  
    }); 

  $("#tabel_data_ship_setting").on('click','.ch_ln',function(){
     var key = "ch_ln";
     var syarat_ship_id = $(this).attr('id');
     $.ajax({
        type: "POST",
        url: "app/ship_setting/crud.php",
        data: 'syarat_ship_id='+syarat_ship_id
        +'&key='+key,
        success: function(data){
          $('#tabel_ship_setting').load("app/ship_setting/tabel.php");
         }
      });  
    }); 

$("#tabel_data_ship_setting").on('click','.file_contoh',function(){
	var syarat_ship_id = $(this).attr('id');
	var currentRow=$(this).closest("tr");
	var berkas = currentRow.find("td:eq(1)").text();
	$('#modal_file').modal('show');
	$('#modal_body_file').html("");
	$.ajax({
		type: "POST",
		url: "app/ship_setting/upd_file.php",
		data: 'syarat_ship_id='+syarat_ship_id
    	+'&berkas='+berkas,
		success: function(data){
			$('#modal_body_file').html(data);
		}
	});
});	

                    $("#tabel_data_ship_setting").on('click','.edit_ship_setting',function(){
                        var id = $(this).attr('id');
                        $('#modal_ship_setting').modal('show');
                        $('#modal_body_ship_setting').html("");
                        $.ajax({
                            type: "POST",
                            url: "app/ship_setting/modal.php",
                            data: 'id='+id,
                            success: function(data){
                                $('#modal_body_ship_setting').html(data);
                                $('#berkas').first().focus().selected();
                            }
                        });
                    }); 


  $("#tabel_data_ship_setting").on('click','.delete_ship_setting',function(){
     var x = confirm("Anda yakin ingin menghapus ?");
     if (x) {    
     var key = "delete_ship_setting";
     var id = $(this).attr('id');
     var rowElement = $(this).parent().parent();
     $.ajax({
        type: "POST",
        url: "app/ship_setting/crud.php",
        data: 'id='+id
        +'&key='+key,
        success: function(data){
          rowElement.fadeOut(500).remove();
         }
      });  
    } else {}
    }); 

</script>