How to dynamically add a row without "Requested unknown parameter" error

Question

I am new to DataTables and I am having problems in dynamically adding a new row to the datatable.

Here is my initialization:

table = $("#college-list").DataTable({
    'ajax': {
       'url': 'admin/get_college',
       'type': 'GET'
    },
    'columns': [
       { 'data': 'college_abbrev', "bSortable": true  },
       { 'data': 'college_name' , "bSortable": true },
       {
         "mData": null,
         "bSortable": false,
         "mRender": function(data, type, college) {
            return '<button type="button" class="btn btn-primary edit-college table-condensed">Edit</button>'
                   +'<button data-id="' + college.college_id  + '" type="button" class="delete-college btn btn-primary table-condensed" href="">Delete</button>';
          }
       }
    ]
});

Here is the sample code that I am using when adding a new row (ca, cn, and college_id are variables):

table.row.add( [
    {
       "college_abbrev": ca,
       "college_name": cn,
       "button":'<button type="button" class="btn btn-primary edit-college table-condensed">Edit</button>'
                +'<button data-id="' + college_id  + '" type="button" class="delete-college btn btn-primary table-condensed" href="">Delete</button>'
    }
]).draw();

It creates a row but the columns are empty except for the buttons and it gives the following error:

DataTables warning: table id=college-list - Requested unknown parameter 'college_abbrev' for row 17

How do you properly add a new row?

before adding just check what is the value of ca? I feel that is not proper here! — Guruprasad J Rao
– Guruprasad J Rao, Commented Jun 23, 2015 at 12:59
I have a valid value for ca. Gyrocode pointed out that I was passing an array of objects instead of just a simple object. But thanks for the tip anyway. — Compiler
– Compiler, Commented Jun 23, 2015 at 13:23

Gyrocode.com · Accepted Answer · 2015-06-23 13:12:56Z

10

Use the code below instead:

table.row.add({
   "college_abbrev": ca,
   "college_name": cn,
   "college_id": college_id
}).draw();

You're getting "Requested unknown parameter" error because you're passing array of objects to row.add(), where you should pass simple object instead, see row.add() for more information.

Also you don't need to construct a button in a call to row.add(). Your mRender function will take care of it for you. Instead you need to pass college_id because mRender will need it to produce a button.

Generally, you need to pass row data to row.add() in the same format your Ajax script admin/get_college uses.

edited Jun 23, 2015 at 13:12

answered Jun 23, 2015 at 13:00

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Guruprasad J Rao Over a year ago

I don't think this will answer OPs question because if you see the error and detailed description of the error here it says OP is missing a parameter or not implementing proper format of the parameter! with your code it just appends college_id to the last column whereas it has to be buttons!!

Gyrocode.com Over a year ago

@GuruprasadRao, render function will take of producing the button.

Guruprasad J Rao Over a year ago

That might be but the issue here he is getting at the very beginning of the assigment of ca parameter!! You might be right!! OP has to try and give his feedback!!

Compiler Over a year ago

It worked. So the only problem is the third parameter?

Gyrocode.com Over a year ago

@Compiler, added more details to the answer. The problem is in using array of objects instead of plain object and missing college_id property.

|

Wouter Vanherck · Accepted Answer · 2022-09-08 14:00:39Z

DataTable table.row.add() doesn't seem to accept an array anymore and now expects an object. I had to define columns during the datatable initialization, and change row.add() from .add([val1, val2]) to .add({"v1": val1, "v2": val2}).

old way:

var table;
$(document).ready(function() {
    table = $('#valueTable').DataTable({
        "paging": true,
        "pageLength": -1,
        "lengthMenu": [
            [-1, 5, 10, 25, 50, 100],
            ["All", 5, 10, 25, 50, 100]
        ],
        // Sort by val1, then by val2
        "order": [[0, "desc"], [1, "desc"]]
    });
});


var jRow = table.row
    .add([
        val1,
        val2
    ])
.draw()
.nodes()
.to$();

new way:

var table;
$(document).ready(function() {
    table = $('#valueTable').DataTable({
        "paging": true,
        "pageLength": -1,
        "lengthMenu": [
            [-1, 5, 10, 25, 50, 100],
            ["All", 5, 10, 25, 50, 100]
        ],
        // Sort by val1, then by val2
        "order": [[0, "desc"], [1, "desc"]],
        'columns': [
            { 'data': '1', "bSortable": true },
            { 'data': '2', "bSortable": true },
        ]
    });
});

var jRow = table.row
    .add({
        "1": val1,
        "2": val2
    })
.draw()
.nodes()
.to$();

Collectives™ on Stack Overflow

How to dynamically add a row without "Requested unknown parameter" error

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related