<div id="error_del_client"></div>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover"  style="background-color:white;" id="table_direc">
    <thead>
      <tr>
        <th>#</th>
        <th>Client Image</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
        <?php 
            include('../config/config.php');
            $sql = "SELECT * FROM clients ";
            $res = $conn->query($sql);
            $n = 0;
            while($row = $res->fetch_assoc()){
        ?> 
        <tr>
           <td width="5%"><?php echo ++$n; ?></td>
           <td width="20%"><?php echo '<img src="'."../".$row['cl_image'].'" width="100%" class="img-responsive"/>' ?></td>
           <td width="5%"><a href="edit_client.php?q=<?php echo $row['cl_id']; ?>" class="btn btn-success edit_client" atr="">Edit</a></td>
           <td width="5%"><button class="btn btn-danger del_client" atr="<?php echo $row['cl_id']; ?>">Delete</button></td>
         </tr>
          
          <?php 
          }
          ?>
    </tbody>
  </table>
  </div>
<script src="dist/js/jquery.validate.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
  <script>
  $(function () {
    $('#table_direc').DataTable({
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true
    })
  })
  

  $(".del_client").click(function(){
    var q =  $(this).attr("atr");
   if(confirm('Warning confirm delete Client  !!!  ')){
      $.ajax({
        url:"del_client.php",
        type:"post",
        data:{q:q},
      }).done(function(data){
        console.log(data);
        if(data == 1){
          $("#error_del_client").html('<div class="alert alert-danger">Delete Client complete</div>').fadeIn(1000).delay(5000).fadeOut(function(){  $("#table_client").load('table_client.php'); });
        }else{
          console.log(data);
          return false;
        }
      });
  }else{
    console.log(data);
          return false;
  }
});
</script>