tbl.row.add is undefined. How to reference to a DataTable that is initialized in a separate js file?

myildiz

I have initialized a datatable in a separate js file using the id attribute of the html table. Datatable loads and works. But when i try to insert an ajax result row to datatable using row.add, i get "tbl.row is undefined" error.
How can I correctly reference to a datatable that is initialized in a seperate script file?

that is sample html file:

<!-- Form -->
<form>
  <input type=number .../>
  <button id="btn">Add Product</button>
</form>
<!-- Table -->
<table id="tblOne"  ...>
  <thead><tr><th>...</th></tr></thead>
  <tbody><tr><td>... </td></tr></tbody>
</table>

here's the ajax code included in the html page:

<script type="text/javascript">
$("#btn").on('click', function(){
  var id = $('input').val();  
  $.ajax({
    method: "POST",
    url: "/Product/Add/"+id,
    data: { data }
    success: function (data) {
      tbl.row.add([data.Id, data.Price ...]); // here: I get "tbl.row undefined" error
                                          // I don't know how to correctly reference a datatable
                                          // that is already initialzied in app.js file. $tbl, $('#tbl')
                                          // does not work.
  });
})
</script>

that is the app.js file

$(function () {
  //Collect all tables in html page
  var tableArray = Array.prototype.slice.call($('table'));

  //for each html table produce table name and initialize datatable
  tableArray.forEach(function (el, index) {
  var tblName = $('table').attr('id') === "undefined" ? $('table').attr('id') : 'dt' + index;
  var $tbl = $(el).DataTable({ //options here ...});
  });
})

when i run following script in the browser's console i get "yes":

if ( ! $.fn.DataTable.isDataTable( tblOne ) ) { // tblOne is the id of html table
  console.log("no");
}else {console.log("yes")}

kthorngren

Sounds like the variable tbl is not within the scope of the code with the row.add(). You will need to get an instance of the API. You can save it in a variable or just use it. For more info:
https://datatables.net/manual/api#Accessing-the-API

    success: function (data) {
      var tbl = $('#myTable`).Datatable();
      tbl.row.add([data.Id, data.Price ...])

or

    success: function (data) {
      $('#myTable`).Datatable().row.add([data.Id, data.Price ...])

Kevin

myildiz

Thank you Kevin.. I'll try it. But datatable is already initialized when the page first loaded before I make any ajax request. So won't I see an error if I re-initialize the same table?

kthorngren

But datatable is already initialized when the page first loaded before I make any ajax request. So won't I see an error if I re-initialize the same table?

No. If its initialized you will just get an API instance as long as you don't pass any config options.

Kevin

myildiz

Hi Kevin,

Thank you for your answer. As you mentioned, when i created an instance, it worked. When I load an HTML page, a JavaScript variable in the scope of $(function(){}); can not be re-accessed

myildiz

By the way, on the basis of my question;
I initialize more than one datatables in the same app.js file using array and forEach. Initialized datatables are assigned to a variable that begins with $ prefix to avoid using same variable. So, how can I make those each DataTables api instances global, so that I can access them within the HTML page?

kthorngren

Maybe the table() API will achieve what you are looking for.

Kevin