DataTable Javascript does not add row

Question

I am trying to use this method https://datatables.net/examples/api/add_row.html, my table is consisting of several different HTML elements, they are of the type select and input. I have simplified it here to one input and one column only. My goal is to click the 'add row' button and add an exact row with all the elements to the table. But when I click the 'add row' button The number of entries gets incremented, in the console there is no error or warning, but still I do not see a new row being added to the table.

<table id="myTable">
 <thead>
  <tr>column header 1</tr>
  <tr>column header 2</tr>
 </thead>
 <tbody>
  <tr id="myRow">
    <td id="colorField>
     <input id="color">
    </td>
  </tr>
 </tbody>
</table>

The JS part:

$(document).ready(function() {
    var t = $('#myTable').DataTable();
    $('#addRow').on('click', function(){
        var jRow = $('#myRow');
        jRow.id = "myRow2"; //I thought about changing the id but also not effective
        t.row.add(jRow).draw();

    });

});

Matt Morgan · Accepted Answer · 2016-12-28 18:51:19Z

There are a few problems with your HTML and your JavaScript.

The HTML is not properly formed-- you have two column headers that aren't defined as headers, and then only one data cell that isn't properly closed.

Try this:

<table id="myTable">
    <thead>
    <tr>
        <th>column header 1</th>
        <th>column header 2</th>
    </tr>
    </thead>
    <tbody>
    <tr id="myRow">
        <td id="colorField">
            <input id="color" type="text"/>
        </td>
        <td></td>
    </tr>
    </tbody>
</table>
<button id="addRow">Add Row</button>

And then your JS needs some changes also. You can add a jQuery object as a row, for example like this:

$(document).ready(function() {
  var t = $('#myTable').DataTable();
  $('#addRow').on('click', function(){
    var jRow = $('<tr>').append('<td>Cell 1</td>','<td>Cell 2</td>');
    jRow.attr('id', 'myRow2');
    t.row.add(jRow).draw();
  });
});

thekodester · Accepted Answer · 2016-12-29 12:23:39Z

2

Their is a few issue with your HTML mark up. For example:

<tr>column header 1</tr><tr>column header 2</tr>

should be

<tr><th>Header 1</th><th>Header 2</th></tr>

<tr> is the row and <th> is a row header.

Also make sure id="colorField you close these statements id="colorField" forget the (") at the end.

Here working example:

$(document).ready(function() {
  var $table = $('#table').DataTable(),
    counter = $('#table').find("tbody > tr").length; // get current number of rows
  $('.addRow').on('click', function() {
    var $row = $('.row0'), // find the default row
      newRow = $row.clone().attr("class", "row" + counter); // clone the row and change the class
    $table.row.add(newRow).draw(); // add to the table
    counter++; // increase counter
  });
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row0">
      <td class="field-label">Enter a color:</td>
      <td class="field">
        <input class="color">
      </td>
    </tr>
  </tbody>
</table>
<button class="addRow">Add Row</button>

At $row.clone().attr("class", "row" + counter); this line you don't need to change the class but makes it easier if you want to assign it any JavaScript events (but you do need to .clone() this remove association of the row with the table).

edited Dec 29, 2016 at 12:23

answered Dec 28, 2016 at 18:52

thekodester

6664 silver badges16 bronze badges

3 Comments

techhighlands Over a year ago

The answer is great, though I can't get it to work, I get an error on counter = $('#table').find("tbody > tr").size(); that $(...).find(...).size is not a function, which is strange since $('#table') is a jQuery object.

Offir Over a year ago

@payam The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

thekodester Over a year ago

@OffirPe'er Thank you didn't know that. All updated.

Collectives™ on Stack Overflow

DataTable Javascript does not add row

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related