Update status when checkbox clicked in PHP

Question

I have a table create from datatables, how to change the status field when checkbox clicked, default status is 'before' then when checkbox clicked it update to be 'after'(in database field status), then the table reload..

This dataabs for display table

    .....
   foreach ($data as $key) {
    // add new button, checkbox
    $data[$i]['ceklolos'] = '<input type="checkbox"      id_data="'.$data[$i]   ['status_lolos'].'" class="btn btn-primary btnedit" >';
       $i++;
    ...

How the rest of code, when checkbox in each data clicked that data row update from 'before status' (default database) to be 'after status', after that the table reload..

Thank you, Im using datatable and php

Answer 1

First, add custom data attribute to your checkboxes

<input type="checkbox" data-id="'.$data['id'].'" data-status="'.$data['status'].'" ../>

In your javascript,

// IIFE (Immediately Invoke Function Expressions)
(function (myapp){
   myapp(window.jQuery, window, document);
}(function myapp($, window, document){
   // $ is now locally scoped
   $(function (){
      // dom is now ready
      var dtTable = $("#sometable").DataTable();

      // dom events
      $(document).on("change", '.btnedit', function (){
          var $this = $(this);
          var id = $this.attr("data-id");
          var status = $this.attr("data-status");

          // send ajax request 
          $.ajax({
             url: 'path-to-your-php-file',
             type: 'post',
             dataType: 'json',
             data: {
                id: id, 
                status: status
             },
             beforeSend: function (){
               // do something here before sending ajax
             },
             success: function (data){
               // do something here
               if( data.success ){
                  // update your table, or any html dom you want here
                  // if you want to add/remove rows from your dataTable,
                  // you can refer here 
                  // https://datatables.net/reference/api/row.add()
                  // https://datatables.net/reference/api/row().remove()
                  // 
               }
             },
             error: function (data){
               // do something here if error 
               // console.warn(data);
             }
          });
      });
   });
   // The rest of the code goes here
}));

In your PHP file,

<?php 

$id = $_POST['id'];
$status = $_POST['status'];
// do your update codes here
// 
// after successful update return something so in your ajax you
// will know what happened behind the scene
$response = array('success' => false, 'msg' => 'Some error message');
if( some_update_function_success() ){
   $response = array('success' => true, 'msg' => 'Some success message');
}
echo json_encode($response);