update button in datatable server-side

Question

I've got this table on my view in codeigniter table

<table id="#example">
 <thead>
  <tr>
   <th>ID</th>
   <th>EMRI</th>
   <th>MBIEMRI</th>
   <th>DEPARTAMENTI</th>
   <th>PUNA</th>
   <th></th>
  </tr>
 </thead>
</table>

And I fill them with valid JSON data from database with Jquery-PHP . To identify rows, I have used data-id=$row['id']

How I get data from database

foreach($result->result_array() as $row)
    {
        $sub_array = array();
        $sub_array[] = '<div contenteditable  data-id="'.$row["id"].'" data-column="emer">' . $row["id"] . '</div>';
        $sub_array[] = '<div contenteditable  data-id="'.$row["id"].'" data-column="emer">' . $row["emer"] . '</div>';
        $sub_array[] = '<div contenteditable  data-id="'.$row["id"].'" data-column="mbiemer">' . $row["mbiemer"] . '</div>';
        $sub_array[] = '<select contenteditable id="depedit" data-id="'.$row["id"].'" data-column="departament"><option value="'.$row["text"].'">' . $row["text"] . '</option></select>';
        $sub_array[] = '<select contenteditable id="jobedit" data-id="'.$row["id"].'" data-column="job"><option value="'.$row["text"].'">' . $row["text"] . '</option></select>';
        $sub_array[] = '<button type="button" name="delete" class="btn btn-danger btn-xs delete" id="'.$row["id"].'">Delete</button>
            <button type="button" name="update" class="btn btn-warning btn-xs update" id="'.$row["id"].'">Update</button>';
        $data[] = $sub_array;
    }


    $output = array(
    "draw"    => intval($_POST["draw"]),
    "recordsTotal"  =>  $rows,
    "recordsFiltered" => $number_filter_row,
    "data"    => $data
);

I want to make update button functional. When I click on edit button, I want to edit data of that row.

Can anyone help me?

Answer 1

First add a class name to each of your row, for example for the first row :

<div class="firstRow" ... >...</div>
<div class="secondRow" ... >...</div>

Then you can edit the first row of the clicked button in JQuery :

$('button').click(function(){
    var id = $(this).attr('id');
    $('.firstRow[data-id='+id+']').text("My new text");
});