Cannot add new row

Cannot add new row

mariooomariooo Posts: 15Questions: 4Answers: 0
edited February 2018 in Free community support

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • mariooomariooo Posts: 15Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • mariooomariooo Posts: 15Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • mariooomariooo Posts: 15Questions: 4Answers: 0
    edited February 2018

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • mariooomariooo Posts: 15Questions: 4Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • mariooomariooo Posts: 15Questions: 4Answers: 0
                $('#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.

  • mariooomariooo Posts: 15Questions: 4Answers: 0
    edited February 2018

    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 :smile:

    Thank you guys!

This discussion has been closed.