Menu
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 add. Any help is appreciated..
$('#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>
514
To add a new row, declare a new variable as type DataRow. A new DataRow object is returned when you call the NewRow method. The DataTable then creates the DataRow object based on the structure of the table, as defined by the DataColumnCollection.
With command rbindlist from the data. table package, we can append dt_add_row and new_row row-wise. Object dt_add_row, shown in Table 2, shows the original data. table with the added row number 6.
First store the dataTable object in a variable, var dataTable = $("#viewTable"). DataTable(); Then on ajax success, use dataTable.
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>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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
