Cannot add new row

mariooo

Hi,

I cannot add a new row to my datatable.

    var rowNode = structureTable.row.add(
            {
                "guid": -1,
                "node_name": ""
            }
    ).draw().node();

[
                { data: "guid", visible: false },
                //-------------------------------------------------------------------------
                {
                    width: "20px",
                    render: function (data, type, full, meta) {
                        return '<input class="selector" type="checkbox" />';
                    }
                },
                //-------------------------------------------------------------------------
                {
                    data: "node_name", width: "400px",
                    render: function (data, type, row) {
                        if (type == "display") {
                            return data;
                        }
                        else if (type == "html") {
                            return '<input type="text" value="' + data + '" title="' + data + '"/>';
                        }

                    }
                }
            ]

Do you have any suggestions?

EDIT: Updated code using Markdown Code formatting

kthorngren

What is your goal with this?

                        else if (type == "html") {
                            return '<input type="text" value="' + data + '" title="' + data + '"/>';
                        }

There are four types (display, filter, sort and type) that are available according to the Orthogonal Data docs.

The problem is if the render function is not processing "display" then it fails to return anything. You need to restructure your if statements. I added a final return data; to cover the if / else. This will remove the error.

                    render: function (data, type, row) {
                        if (type == "display") {
                            return data;
                        }
                        else if (type == "html") {
                            return '<input type="text" value="' + data + '" title="' + data + '"/>';
                        }
                      return data;   //added this
                    }

However type == "html" is not going to match since there is no type html. I'm thinking what you really want is this:

                    render: function (data, type, row) {
                        if (type == "display") {
                            return '<input type="text" value="' + data + '" title="' + data + '"/>';
                        }
                      return data; 
                    }

Kevin

mariooo

It's my type for displaying data as html tags, because I have freezes of page when i was rendering all my rows as html. So i created this type and makes row editable when i click on row, then its rendering as inputs from "html" type.

kthorngren

Ok, You still need a final return in case the type is neither "html" or "display". Otherwise nothing is returned resulting in the "Requested unknown parameter". Or maybe I'm not understanding the issue since you don't indicate if there is an error or what exactly happens.

Kevin

mariooo

Row is not adding at all, no error, just nothing happend. And don't know why? Is my adding object is wrong?

kthorngren

Your code seems to work here:
http://live.datatables.net/vuvisuwe/1/edit

All I did was add the return data; as described above. Maybe you can update the test case to show your issue.

Kevin

mariooo

I added this return data after at the end of the render function, but it not helps. But in your example it works.. Interesting.

I really have no idea why it's undefined. Reference to table is correct.

allan

We'd need a link to a test case showing the issue, or as Kevin suggested, perhaps you can update the example he put together to demonstrate the issue?

Allan

mariooo

Updated Kevin's code as is mine, but i don't know why data aren't displaying. Maybe you can figure out how to fix this example. Perhaps adding not works because of serverside and when draw function is called then it getting data again from the server.

http://live.datatables.net/vuvisuwe/3/edit

allan

Yes - you have server-side processing enabled, but no server-side response.

Indeed, you can't assign the data for the table to ajax. As the documentation notes it should be either a string or an object - either way it needs to point at the server-side script that is responding with data.

If you want to experiment with server-side processing on the live site, use this example as a base line.

Allan

mariooo

            $('#btn_add').on('click', function (e) {
                addNew = true;
                structureTable.row.add(
                    {
                        "guid": "-1",
                        "node_name": ""
                    }).draw(false).node();
            });


                dataSrc: function (json) {
                    var return_data = new Array();
                    for (var i = 0; i < json.data.length; i++) {
                        return_data.push({
                            'guid': json.data[i].guid,
                            'node_name': json.data[i].node_name,
                        });
                        if (addNew == true) {
                            return_data.push({
                                'guid': -1,
                                'node_name': "",
                            });
                            addNew = false;
                        }
                    }
                    return return_data;
                }

I did something like this, it works, but it's not really good way I think. Is there any other possibility? To not making a server call with draw? Maybe just create a <tr> element and append to the table, will it work? However my code works, but adding the row as second, not at the end.

mariooo

Ehhh i'm so stupid.. I actually don't need serverside because Im only need ajax to download data. I don't have a very large tables with paging etc. So... I think we can close this thread

Thank you guys!