Jquery Datatable how to edit, save and add a new row

Question

I am trying make the rows from table 1, editable as well i would like add a new row too.

I found this sample working perfeclty here. But i could not apply in my sample here in my jsfiddle

Iam pasting the working sample as snippet here below

function addUser() {
  var $source = $("#example2").DataTable();
  var names = $($source.rows().nodes())
    .filter(':has(:checked)')
    .map(function() {
      return $(this).children().first().text();
    }).toArray();
  console.log(names);
  var $rows = $source.rows(function(i, data) {
    return names.indexOf('' + data.name) != -1;
  });
  var data = $rows.data();
  if (data.length > 0) {
    $rows.remove().draw();
    $("#example").DataTable().rows.add(data.toArray()).draw();
  }
}

function checkAll(check) {
  $('#chk').prop('checked', check == 1);
  var $source = $("#example2").DataTable();
  var names = $($source.rows().nodes())
    .find('input[type="checkbox"]')
    .each(function(i, el) {
      el.checked = check == 1;
    });
  return false;
}


function all() {
  var a = 0;
  var $source = $("#example2").DataTable();
  var names = $($source.rows().nodes())
    .find('input[type="checkbox"]')
    .each(function(i, el) {
      if (el.checked) {
        a++
      }
      console.log(a);
    });
  if (a == 5) {
    $('#chk').prop('checked', true);
  } else {
    $('#chk').prop('checked', false);
  }
}

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

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/cvQJpCWCuW?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'name'
    }, {
      data: 'name'
    }, {
      data: 'place'
    }]
  });
  table.rowReordering();

});


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

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
  var table = $('#example2').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'name'
    }, {
      data: 'checkbox'
    }]
  });
  table.rowReordering();

});

$(document).ready(function() {


  $('#example2').on('click', 'input[type="checkbox"]', function() {
    all();
  });

  $('body').on('mouseenter', 'input', function() {
    $('.btn').prop('disabled', true);
  });
  $('body').on('mouseout', 'input', function() {
    $('.btn').prop('disabled', false);
  });
  $('#chk').on('change', function() {
    console.log($(this));
    if ($(this)[0].checked) {
      checkAll(1);
    } else {
      checkAll(0);
    }
  });
  $('#checkAll').click(function() {
    checkAll(1);
  });
  $('#uncheckAll').click(function() {
    checkAll(0);
  });
  $('#btnAddUser').click(function() {
    addUser();
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script>
<link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<br>
<br>
<h1>
  table1
</h1>
<br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>Order</th>
    </tr>
  </thead>
</table>
<br>
<br>
<h1>
  table 2
</h1>
<br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Place</th>
      <th>checkbox</th>
    </tr>
  </thead>
</table>


<div class="col-md-12">
  <div class="col-md-6">
    <button type="button" class="btn btn-success" id="btnAddUser">Add a user</button>
  </div>
  <div class="col-md-6">select all or none
    <div class="btn-group">
      <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <input type="checkbox" name="vehicle1" value="Bike" id="chk">
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
      <ul class="dropdown-menu" role="menu">
        <li><a id="checkAll">All</a></li>
        <li><a id="uncheckAll">None</a></li>
      </ul>
    </div>
  </div>
</div>

You haven't added the action buttons. How do you expect to trigger the editable field part? — Shalinee SIngh
– Shalinee SIngh, Commented Mar 22, 2017 at 12:16
You haven't added functions for editing. You already have a working code. Try that first. Also when you add the user, you need to specify the element where you want to bind your HTML. Select td of of the table id and append to it. — Shalinee SIngh
– Shalinee SIngh, Commented Mar 22, 2017 at 12:42

Offir · Accepted Answer · 2017-03-23 14:00:09Z

3

+100

It's funny to see fiddles I have made for old questions are starring in new questions.

Anyway, I have made a plunker for you, it's working. Take the dataTables.rowReorder.js file to your project, I modified it to support input editing.

Few things that I added to this plunker: The add row function will iterate over TABLE2 and will select the rows with the checked checkboxes and will add them to TABLE1 and remove them from TABLE2. It takes the name value of the selected row, and default value Some Country you can debug it and take whatever piece of data you want for your table.

 $('#addRow').click(function() { 

        var rowsHtml; 
        var $newRowTemplate = $("#newRow").find("tr");

        table2.rows().every(function(rowIdx, tableLoop, rowLoop) {

          var row = this.node();
          var isChecked = $(row).find("input[type='checkbox']").prop("checked");

          if (isChecked) {
            $newRowTemplate.find("td:first").text(table.rows().count() + 1);
            $newRowTemplate.find("input[name='name']").attr("value",this.data().name);
            $newRowTemplate.find("input[name='country']").attr("value","Some Country");

            rowHtml = $newRowTemplate[0].outerHTML;  
            table.row.add($(rowHtml)).draw();

            $(row).addClass("remove");

          }

        });

        table2.rows(".remove").remove().draw();

      });

I also fixed the search functionality that you supplied in your "working fiddles", the search there wasn't working for new added rows, mine works and it's because there is a need to update the table.cell.data() and not only the html of the datatables, this is IMPORTANT!

You can see it in the save function:

 $("#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);

          //This is where I update the cell data with the new value
          table.cell(this).data(txt);
        });

        var $firstTdSelect = $row.find("td:first");
        var selectValue = $firstTdSelect.find("select").val();
        $row.find("td:first").html(selectValue);

        //This is where I update the cell data with the new value            
        table.cell($firstTdSelect).data(selectValue);

      });

You asked in your question for adding new rows, editing rows and I added a few more stuff, Don't complain that the "Save All" and "Cancel" button are not there, because you can't ask from users here to do all the job for you, take this plunker that already contains all the code you need for the "Save all" button and try to solve it by your self, if you won't succeed post a new question.

Check out this Working Plunk.

edited Mar 23, 2017 at 14:00

answered Mar 22, 2017 at 17:01

Offir

3,5015 gold badges50 silver badges81 bronze badges

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

3 Comments

user6446281 Over a year ago

thanks Offir, but your sample it is kinda diferent what I want :(, first in table 1 the field oder need to be editable as a dropbox and this table 1 should have a button save like this sample shows see: jsfiddle.net/55rfa8zb/1 , second - in table 2 exist a checkbox to select all or none as you can see in this sample: select all or none , thanks for you help really appreciate

Offir Over a year ago

It wasn't cleae enough what you were asking, but I have done all the Heavy lifting for you, If u are really stuck I can finish it for you tomorrow.

user6446281 Over a year ago

thanks offir, yes if you can help me on that, I am very noob in javascript stuff, I can wait for your help, I appreciate your time, thank you.

Bindrid · Accepted Answer · 2017-03-19 04:28:13Z

I made a fully editable table (add, edit, delete) using datatables and jquery. Its located here http://jsbin.com/yafuvah/edit?html,css,js,output if you want to play with it. I had a version that used checkbox but this version uses the select rows extension set to single row.

   var dataObject = null;

    $(document).ready(function () {
        var table = $('#example').DataTable({
            buttons: [{
              text: "Edit", className :"editButton",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { editRow(e, dt, bt, config); }
            }, {
                text: "Save",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { saveRow(e, dt, bt, config); }
            }, {
                text: "Add",
                action: function (e, dt, bt, config) { addRow(e, dt, bt, config); }
            }, {
                text: "Delete",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { removeRow(e, dt, bt, config); }
            }],
            dom: "Btp",
            select: "single"
        });

        var dataObject = table.rows().data();

        // keep the rows from deselection when you click on a textbox
        // this means you have to click between textboxes to change edit rows when more than one is onpen
        $("#example").on("click", "input", function (e) { e.stopPropagation(); return false; });

        table.on('user-select', function (e, dt, type, cell, originalEvent) {
            if ($('#example input').length > 0) {
                e.preventDefault();
                return false;
            }
        });
    });

    // Adds a new row in edit mode
    function addRow(e, dt, bt, config) {
        if ($('#example input').length > 0) {
            // only one row is allowed to be in edit mode at a time
            return false;
        }
        var $nr = dt.row.add(["", "", "", "", "", ""]).draw(false).nodes().to$();
      $nr.addClass("newRow");
        dt.rows($nr).select();
        $nr.children("td").each(function (i, it) {
            $(it).append("<input type='text'>");
        });
      $(".editButton span").text("Cancel");
      // Puts 
      dt.page("first").draw();
    }

     function removeRow(e, dt, bt, config){
          var r = dt.rows(".selected").nodes()[0];
       var n = $("td:first", r).text();
       if(!confirm("You are about to remove " + n)){return;}
        dt.rows(".selected").remove().draw();
     }

    // Save the selected row (assuming its in edit mode)
    function saveRow(e, dt, bt, config) {
        var r = dt.rows(".selected").nodes()[0];

        // if row is not edit mode, just return.
        if ($("input", r).length === 0) { return; }


        var d = dt.rows(".selected").data()[0];
        var containsText = false;
        $(r).children("td").each(function (i, it) {
            var di = $("input", it).val();
            if (di.length > 0) { containsText = true; }
            $(it).html(di);
            d[i] = di;
        });
        if (!containsText) {
            alert("This row contains no data and will be removed");
            dt.rows(".selected").remove().draw();
        }
      $(".editButton span").text("Edit");
    }

    // Puts a row in edit mode
    function editRow(e, dt, bt, config) {
       var r = dt.rows(".selected").nodes()[0];
     if(  $("span", bt[0]).text() == "Cancel"){

       if($(r).hasClass("newRow")){
          dt.rows(".selected").remove().draw();
       }
       else {
       $(r).children("td").each(function (i, it) {
            var od = dt.cells(it).data();
            $(it).html(od[0]);
        });
       } 

       $("span", bt[0]).text("Edit");
       return;
     }

        // if row already in edit mode, just return.
        if ($("input", r).length > 0) { return; }

        $(r).children("td").each(function (i, it) {
            var h = $("<input type='text'>");
            h.val(it.innerText);
            $(it).html(h);
        });
      $("span", bt[0]).text("Cancel");
    }

Thanks for the code but after adding the buttons (add & edit) my search and paging buttons disappear... and I can see something similar on your example as well. Is there a way to make them visible as well... Thanks for Jogging your memory!

Collectives™ on Stack Overflow

Jquery Datatable how to edit, save and add a new row

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related