Inline editing datatable jquery

Question

Hi I have been trying to follow this tutorial about inline editing http://www.vandelaydesign.com/inline-edit-with-ajax/ . I want to apply it in my data table. When the user clicks the edit button the corresponding columns within its line becomes an input, but I do not know how to turn it that way. In the tutorial it uses .prev in jquery to get the value of the of the span but I do not know how to do that in my case. This is what my table looks like:

Category name and desc should become inputs when edit button is clicked. How do I do that?

<tbody>
    <?php foreach ($categories as $category) { ?>
        <tr>
            <td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?>  </span> </td>
            <td>
                <?= $category->category_desc ?>
            </td>
            <td>
                <?= $category->created_on ?>
            </td>
            <td>
                <?= $category->updated_on ?>
            </td>
            <td>
                <?= $category->status ?>
            </td>
            <td>
                <button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat">
                    <!-- data-id="<?= $category->category_id ?>" -->
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                </button>
            </td>
        </tr>
        <?php } ?>
</tbody>

Javascript:

 $(document).on('click', '.edit_cat', function() {
      console.log('edit category');
      // console.log( $(this).data('id') );
      var dataset = $(this).prev(".datainfo");
      console.log(dataset);
      var theid   = dataset.attr("id");
      console.log(theid);
      var newid   = theid+"-form";
      var currval = dataset.text();

      dataset.empty();

       $('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);

    });

I also need help in future proofing after solving this problem, How would I go about saving it, maybe getting the span id and start from there?

Answer 1

Datatables have a build in implementation of inline editing.

It gets installed as an own extension

Inline editing in Editor is activated through the use of the inline() API method. Simply call the method and pass in the cell you want to edit as the first parameter.

Take a closer look here - https://editor.datatables.net/examples/inline-editing/simple