CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
ATP
ATP

Reputation: 862

How do you add rows to a datatable through javascript?

I want to add rows to the datatable when the page is displayed using a javascript array. I am trying to figure this out, but the row does not get added.

$('#dataTables-example').DataTable().fnAddData([
  '1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Upvotes: 12

Views: 47651

Answers (4)

MEC
MEC

Reputation: 1736

To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here.

In acknowledgement that the above code structure isn't always particularly attractive, DataTables as a retrieve [DT] option which can be used to tell DataTables that you are aware that the initialisation options can't be changed after initialisation, and that should that occur, that you just want the DataTable instance to be returned.

This optional parameter can provide a short-cut to the explicit check using $.fn.dataTable.isDataTable() as above when obtaining a DataTables instance:

table = $('#example').DataTable( {
retrieve: true,
paging: false } );

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

Your code works fine, but only with version 1.9.x (or earlier) of the plugin.

$('#dataTables-example').DataTable().fnAddData([
  '1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Following the examples on the datatables.net web site for the latest version (1.10.x):

$('#dataTables-example').DataTable().row.add([
  '1', '1', '1'
]).draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Upvotes: 18

lshettyl
lshettyl

Reputation: 8181

From the API, this is one of the ways to add rows:

var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();

Demo@Fiddle

Upvotes: 4

Adrian Bolonio
Adrian Bolonio

Reputation: 517

Maybe you can generate the row before and then append it to the tbody just using jQuery

$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");

Upvotes: -3

Related Questions