DataTables: Adding new row Requested unknown parameter 'id' for row 14

haxxorsid

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?

bindrid

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

haxxorsid

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:

$('#table-edit_new').click(function (e) {
    e.preventDefault();

    //Problem appears from here in this fnaddData
    var aiNew = oTable.fnAddData(['', '', '', '',
         '<p class="text-center"><a class="edit btn btn-dark" href=""><i class="fa fa-pencil-square-o"></i>Edit</a> <a class="delete btn btn-danger" href=""><i class="fa fa-times-circle"></i> Remove</a></p>'
    ]);
    var nRow = oTable.fnGetNodes(aiNew[0]);
    editRow(oTable, nRow);
    nEditing = nRow;
});

Whole JS is derived from here: DataTables: Inline Editing

tangerine

For more information about this error, please see datatables.net/tn/4

Have you followed the diagnostics explained at that link?

haxxorsid

Yes I've followed and I have understood the root of problem, but I am not able to solve it.

bindrid

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

haxxorsid

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.

haxxorsid

SOLVED IT. YOLO. SOLVED IT. YOLO. SOLVED IT. YOLO. bindrid's .add({..}).draw().node() worked for obtaining node. AND GGWP.