Jquery Datatables add new row in json table

Question

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

I amtrying to add a new row in my json table.

I could not get it work any ideas why not?

jsfiddle: http://jsfiddle.net/f7debwj2/17/

html:

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

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td>Line 2
        <input type="hidden" value="2" /> </td>
      <td>DVap
        <input type="hidden" value="DVap" /> </td>
      <td>
        <input type="text" value="22" /> </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/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'place'
    }]
  });
  // add row
  $('#addRow').click(function() {
    //t.row.add( [1,2,3] ).draw();
    var rowHtml = $("#newRow").find("tr")[0].outerHTML
    console.log(rowHtml);
    dt.row.add($(rowHtml)).draw();
  });
});

Why not use .clone().appendTo()? Edit: oh - DataTable might need to reinit the html dom... Anyway - jsfiddle or code snippet would be helpful EDIT2 - oh my bad. there is jsfiddle — Adam K.
– Adam K., Commented Feb 27, 2017 at 12:51

gaetanoM · Accepted Answer · 2017-02-27 12:53:52Z

3

Like you can see in the documentation you need to change this line:

dt.row.add($(rowHtml)).draw();

to:

table.row.add($(rowHtml)).draw();

The updated fiddle.

answered Feb 27, 2017 at 12:53

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

Comments

manika · Accepted Answer · 2017-02-27 12:56:54Z

1

Your actual error was Uncaught ReferenceError: dt is not defined

Just change table.row.add($(rowHtml)).draw() instead of dt.row.add($(rowHtml)).draw() inside button click event.

answered Feb 27, 2017 at 12:56

manika

1872 silver badges13 bronze badges

2 Comments

Adam K. Over a year ago

That is mainly ref problem. When you set global scope var dt outside and before $(document).ready(); then you'll have no problem accessing it inside.

manika Over a year ago

You are right but dt is also being destroy in the same scope.

Collectives™ on Stack Overflow

Jquery Datatables add new row in json table

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related