
<!DOCTYPE html>
<html>
   
   
    <head>
        <script src="ambildata.js"></script>
        <script src="efekscrol.js"></script>
        <title>Halaman OPD</title>

     
    </head>
    <body>
   
    <div class="content-wrapper">
   
            
        <div class ="wrapper">
        <div class="panel-body"  style ="overflow-x :auto ; overflow-y :auto ">
            
      
<?php
include '../../../config/koneksi.php';
?>
<table width="100%"  id="example1" class="table table-bordered table-striped">
<thead>
       <tr style="text-align:center ; background-color:lightgrey" >
        <th style="text-align:center"  >No</th>
       <th style="text-align:center"  >ID</th>
       <th style="text-align:center"  >Kode OPD</th>
       <th style="text-align:center"  >OPD</th>
       <th style="text-align:center">Aksi</th>
       </tr>
       </thead>
       <tbody>
<?php
$no=0;
$sql = "SELECT id_opd, kode_opd, opd from opd";
$result = mysqli_query($koneksi, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
  
    while($row = mysqli_fetch_assoc($result)) {
        ?>
      
      <tr style="background-color:white">
      <td  style="width:1%"> <?php echo $no=$no+1 ;?>                        </td>
      <td style="width:5%"> <?php echo $row["id_opd"];?>                     </td>
      <td style="width:10%"> <?php echo  $row["kode_opd"];?>                   </td>
      <td style="width:5%"> <?php echo  $row["opd"];?>                  </td>

      
  
       <td style="text-align:center ; vertical-align: middle; width:10%">  
<div class="row">
       
               <button id="myButton" type="button" class=" selubah  btn btn-info fa fa-edit " data-toggle="modal" data-target="#modal-ubah">
                Ubah
              </button>
              |
               <button id="myButton" type="button" class=" selhapus  btn btn-danger fa fa-edit " data-toggle="modal" data-target="#modal-hapus">
                Hapus
              </button>
          </div>

          </td>
      </tr>
     

     
 <?php 
    }
} 


mysqli_close($koneksi);
?> 
 </tbody>
  </table>
  
          <script>
              $(document).ready(function () {
                 $(".selubah").on('click', function () {
                    
                    var currentRow = $(this).closest("tr");
              
                      var col0 = currentRow.find("td:eq(0)").html();
                      var col1 = currentRow.find("td:eq(1)").html();
                      var col2 = currentRow.find("td:eq(2)").html();
                      var col3 = currentRow.find("td:eq(3)").html();
                      
                      col1 = col1.replace(/^\s+|\s+$/g, '');
                      col2 = col2.replace(/^\s+|\s+$/g, '');
                      col3 = col3.replace(/^\s+|\s+$/g, '');
                     
                      
                    
                      $("#id_opdu").val(col1);
                      $("#kode_opdu").val(col2);
                      $("#opdu").val(col3);
                     

                      
                          });
                
                  $(".selhapus").on('click', function () {
                    var currentRow = $(this).closest("tr");
                       var col0 = currentRow.find("td:eq(0)").html();
                      var col1 = currentRow.find("td:eq(1)").html();
                      var col2 = currentRow.find("td:eq(2)").html();
                      var col3 = currentRow.find("td:eq(3)").html();
                      
                      col1 = col1.replace(/^\s+|\s+$/g, '');
                      col2 = col2.replace(/^\s+|\s+$/g, '');
                      col3 = col3.replace(/^\s+|\s+$/g, '');
                     
                      
                    
                      $("#id_opdh").val(col1);
                      $("#kode_opdh").val(col2);
                      $("#opdh").val(col3);
                    
                  });
                  
                                        


                  });

                  





                
           
</script>

<script type="text/javascript">
      function loadul(){
    
        $('#tumbsi').summernote(
        {
            placeholder:'input data anda',
            height:200,
            toolbar: [
['style', []],
['font', []],
['color', []],
['para', []],
['table', []],
['insert', ['picture']],
['view', ['fullscreen']]
]
        });


       
   
 }
</script>
        <script>

  $(function () {
    // Summernote
    $('#summernote1').summernote(
        {
            placeholder:'input data anda',
            height:200,
        });

   
   $('#tumbsi').summernote(
        {
            placeholder:'input data anda',
            height:200,
            toolbar: [
['style', []],
['font', []],
['color', []],
['para', []],
['table', []],
['insert', ['picture']],
['view', ['fullscreen']]
]
        });

   

   
    CodeMirror.fromTextArea(document.getElementById("beritai"), {
      mode: "htmlmixed",
      theme: "monokai"
    });


  })
</script>
          
         <script>
            $(function () {
                $("#example1").DataTable({
                    "responsive": true,
                    "lengthChange": true,
                    "autoWidth": true,
                    "buttons": ["copy", "csv", "excel", "pdf", "print"]
                }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
                $('#example2').DataTable({
                    "paging": true,
                    "lengthChange": false,
                    "searching": false,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "responsive": true,
                });
            });
</script>
 
</body>
</html>