Jquery Datatables Editing row

Question

I am using: jquery.dataTables.js from: https://datatables.net

Issue 1 - Drag and Drop does not work after the user add a new row

What I need: make the row editable after click in the pencil.

similar to this sample: https://editor.datatables.net/examples/simple/inTableControls.html

html:

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td><select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">option 1</option>
          <option value="2">option 2</option>
          <option value="2">option 3</option>
        </select>
      </td>
      <td>DVap
       </td>
      <td>
       www</td>
      <td><i class="fa fa-pencil-square" aria-hidden="true"></i>
        <i class="fa fa-minus-square" aria-hidden="true"></i>  </td>
    </tr>
  </tbody>
</table>

jquery:

  $(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
  });

  $(document).ready(function() {
    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
    var table = $('#example').DataTable({
      ajax: url,
      rowReorder: {
        dataSrc: 'order',
      },
      columns: [{
        data: 'order'
      }, {
        data: 'place'
      }, {
        data: 'name'
      }, {
        data: 'delete'
      }],
      "initComplete": function(oSettings) {
        $(this).on('click', "i.fa.fa-minus-square", function(e) {
          table.row( $(this).closest('tr') ).remove().draw();
        });
      }
    });

    // add row
    $('#addRow').click(function() {
      //t.row.add( [1,2,3] ).draw();
      var rowHtml = $("#newRow").find("tr")[0].outerHTML
      console.log(rowHtml);
      table.row.add($(rowHtml)).draw();
    });
  });

jsfiddle: http://jsfiddle.net/5L2qy092/5/

Spikolynn · Accepted Answer · 2017-08-15 19:32:36Z

13

Now you can drag and drop with all the row and not only the first td.
Also the edit is inline the table. I believe this is what you wanted: WORKING DEMO.

<script>
    $(document).ready(function() {

      var table;

      $("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
        table.row($(this).closest("tr")).remove().draw();
      })

      $("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {

        $(this).removeClass().addClass("fa fa-envelope-o");
        var $row = $(this).closest("tr").off("mousedown");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).text();
          $(this).html("").append("<input type='text' value='" + txt + "'>");
        });

      });

      $("#example").on('mousedown', "input", function(e) {
        e.stopPropagation();
      });

      $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {

        $(this).removeClass().addClass("fa fa-pencil-square");
        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val()
          $(this).html(txt);
        });
      });


       $("#example").on('mousedown', "#selectbasic", function(e) {
        e.stopPropagation();
      });


      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
      table = $('#example').DataTable({
        ajax: url,
        rowReorder: {
          dataSrc: 'order',
          selector: 'tr'
        },
        columns: [{
          data: 'order'
        }, {
          data: 'place'
        }, {
          data: 'name'
        }, {
          data: 'delete'
        }]
      });

      // add row
      $('#addRow').click(function() {
        //t.row.add( [1,2,3] ).draw();
        var rowHtml = $("#newRow").find("tr")[0].outerHTML
        console.log(rowHtml);
        table.row.add($(rowHtml)).draw();
      });
    });
  </script>

edited Aug 15, 2017 at 19:32

Spikolynn

4,1932 gold badges40 silver badges49 bronze badges

answered Feb 28, 2017 at 12:29

Offir

3,5015 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

raduken Over a year ago

thanks Offir for this, one last thing can the add button be inside the rows instead outside? as this sample? jsfiddle.net/5L2qy092/8

Offir Over a year ago

@Raduken There you go, plnkr.co/edit/B9fJQwgdLXEqBhrIJI76?p=preview. You should mark answers that helped you as answers.

raduken Over a year ago

everything it is working perfect but now is broking the table, can that button be as a row as well? like the sample? jsfiddle.net/5L2qy092/8 thank you

raduken Over a year ago

hey Offir, do you know why if I change in the ajax call for this: columns: [{ data: 'place' }, { data: 'name' }, { data: 'order' }, { data: 'delete' }] , the new rows start be in the top instead in the bottom and the drag drop does not work.

Offir Over a year ago

Hi @Raduken, try to work it out, you can easily debug it. If still no success , than ask a new question.

Willy David Jr · Accepted Answer · 2021-01-20 19:52:53Z

I used this code to edit or update specific row index on DataTable using Modal in which its a different section of my page. Most example points when you click a part of your datatable, from there you can update it. Unfortunately, I need to update it using Modal of Bootstrap:

var table = $('#tblSchedule').DataTable();

    table.row($('#hdnRowClicked').val()).data([
                "Tiger Nixon",
                "System Architect",
                "$3,120",
                "2011/04/25",
                "Edinburgh",
                "5421",
                "Tiger Nixon",
                "System Architect",
                "$3,120",
                "<p>Hello</p>"
            ]).draw();

To get row index, I saved the row index whenever someone click my edit button with class btn-edit using hidden tag element with an ID of hdnRowClicked:

$('#tblRecord .btn-edit').click(function () {
        $('#hdnRowClicked').val($(this).parents('tr').index());
    });

rad11 · Accepted Answer · 2017-02-28 10:25:52Z

I give you a simple way to do this:

<div id="dialog" title="Basic dialog">


</div>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td><select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">option 1</option>
          <option value="2">option 2</option>
          <option value="2">option 3</option>
        </select>
      </td>
      <td>DVap
       </td>
      <td>
       www</td>
      <td><i class="fa fa-pencil-square" aria-hidden="true"></i>
        <i class="fa fa-minus-square" aria-hidden="true"></i>  </td>
    </tr>
  </tbody>
</table>



$(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
  });

  $(document).ready(function() {
    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
    var table = $('#example').DataTable({
      ajax: url,
      rowReorder: {
        dataSrc: 'order',
      },
      columns: [{
        data: 'order',
        type: 'text'
      }, {
        data: 'place',
        type: 'text',
        edit: true
      }, {
        data: 'name',
        type: 'text',
        edit: true
      }, {
        data: 'delete',
        type: 'text'
      }],
      "initComplete": function(oSettings) {
        $(this).on('click', "i.fa.fa-minus-square", function(e) {
          table.row( $(this).closest('tr') ).remove().draw();
        });


        $(this).on('click', 'i.fa.fa-pencil-square', function(e){
            var rowData = table.row($(this).closest('tr')).data();
          var columns = table.settings().pop().aoColumns;
          var column = columns[table.column($(this).closest('td')).index()];
          var rowIndex = table.row($(this).closest('tr')).index();

          var html = '<form id="form">';
          for(var col in columns){
            if(columns[col].type === 'text' && columns[col].edit){
              html += '<input type="text" value="'+rowData[columns[col].data]+'" name="'+columns[col].data+'" placeholder="'+columns[col].data+'"/><br />';
            }
          }

          html += '<input type="hidden" name="rowIndex" id="rowIndex" value="'+rowIndex+'" />';
          html += '<input type="submit" id="update"/></form>';
          $('#dialog').html(html);
          $( "#dialog" ).modal();
        });

      }
    });

    $('body').on('click', '#update', function(e) {
        e.preventDefault();
        var data = $('#form').serializeArray();
      var rowIndex = $('#rowIndex').val();
      var rowData = table.row(rowIndex).data();
      var newData = {};

      newData['order'] = rowData['order'];
      newData['delete'] = rowData['delete'];

      for(var d in data){
        newData[data[d]['name']] = data[d]['value'];
      }

      table
          .row(rowIndex)
          .data(newData)
          .draw();
    });
  });

http://jsfiddle.net/5L2qy092/7/

thank you so much, is that what i am looking for, can I have a save button instead submit? and when i click save save the row and close the modal? thank you
@Raduken , without disrespecting rad11, the fiddler he provided doesn't work as expected. Add new row not working and also saving the edit changes are not working.

Collectives™ on Stack Overflow

Jquery Datatables Editing row

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related