tbl.row.add is undefined. How to reference to a DataTable that is initialized in a separate js file?
tbl.row.add is undefined. How to reference to a DataTable that is initialized in a separate js file?
myildiz
Posts: 8Questions: 2Answers: 0
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")}
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Sounds like the variable
tblis not within the scope of the code with therow.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
or
Kevin
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?
No. If its initialized you will just get an API instance as long as you don't pass any config options.
Kevin
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-accessedBy 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?
Maybe the
table()API will achieve what you are looking for.Kevin