Question: DataTable Javascript does not add row

Question

DataTable Javascript does not add row

Answers 3
Added at 2016-12-28 19:12
Tags
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();

    });

});
Answers to

DataTable Javascript does not add row

nr: #1 dodano: 2016-12-28 19:12

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();
  });
});
nr: #2 dodano: 2016-12-28 19:12

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).

nr: #3 dodano: 2016-12-29 13:12

If I am already on it, here is how you suppose to add rows using the DataTables api. If you want to add id's by rows number you can use table.data().count().

$(document).ready(function() {
  var $table = $('#table').DataTable();

  var firstTD = "<td class='field-label'>Enter a color:</td>";
  var secondTD = "<td class='field'><input class='color'></td>";

  $('.addRow').on('click', function() {
 $table.row.add([firstTD ,secondTD]).draw();

  });
});
<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>

Source Show
◀ Wstecz