DataTables: Adding new row Requested unknown parameter 'id' for row 14
DataTables: Adding new row Requested unknown parameter 'id' for row 14
haxxorsid
Posts: 6Questions: 2Answers: 1
AJAX:
{
"data": [
{
"id": 1,
"name": "Dashboard",
"url": "/",
"icon": "icon-home",
"child_of": null,
"show": 1,
"admin": 0
},
{
"id": 2,
"name": "Submenu 3",
"url": "http://stackoverflow.com",
"icon": null,
"child_of": null,
"show": 1,
"admin": 0
},
]
}
JS:
$('#table-editable').dataTable({
"ajax": {
"url": "/api/menu",
"type": "GET",
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "url" },
{ "data": "icon" },
{ "data": "child_of" },
{ "data": "show" },
{ "data": "admin" }
]
});
So I'm using AJAX to fill up data in tables. It is working.
I am using this: DataTables: Inline Editing for creating new row. (Check Adding row & Edit Mode in link)
Problem:
Consider I've 13 rows. So IDs will be 1, 2, 3... 13.
While creating new row: It does this:oTable.fnAddData('', '',....); So when I add new row, it gives me error:
DataTables warning: table id=table-editable - Requested unknown parameter 'id' for row 14. For more information about this error, please see datatables.net/tn/4
So, basically it tries to fetch row id 14. But, there's no row with id 14.
So what is the solution?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
We need to see the code where you are attempting to add the row.
It may not be relevant to your situation but here is my jsbin where I am adding rows.
http://jsbin.com/rilaqig/edit?html,js,output
Webpage
JS
I am using the same UI and JS files. The only difference is I am using AJAX to load, delete, update rows. I am stuck at creating new ones.
Action on Add new row button click:
Whole JS is derived from here: DataTables: Inline Editing
Have you followed the diagnostics explained at that link?
Yes I've followed and I have understood the root of problem, but I am not able to solve it.
oh, that code is out of date. tabletools has been deprecated so that code will not work properly with the latest version of DataTables.
I created a fully editable table as an example, it could be a starting point for what you are trying to do.
http://jsbin.com/yafuvah/350/edit?html,css,js,output
Ok.
Basically what I am doing is, I am using fnAddData for creating row. Then using it for obtaining node through fnGetNodes. Then that node is used by passing in function editRow() and in that:
var jqTds = $('>td', nRow);where nRow is the node.
I am using jqTds for changing the row in input elements by:
jqTds[0].innerHTML = '<input type="text" class="form-control small">';So I tried using oTable.row.add() as you've did. But I get error that there is no property named innerHTML.
So problem here is: fnAddData checks for row with id 14, where id 13 is the id of last row. So id 14 doesn't exist. So is there any way to avoid ?
This is my JS File: Code
Please look at editRow() and $('#table-edit_new').click() and help me out.
SOLVED IT. YOLO. SOLVED IT. YOLO. SOLVED IT. YOLO. bindrid's .add({..}).draw().node() worked for obtaining node. AND GGWP.