Getting error when adding rows as jQuery instance

yasserlotfy

I load DataTables on page which already have HTML table and search engine,
Search engine submit data via ajax and retrieve it to DataTables through clearing data then add rows, but I got this error:

DataTables warning: table id=students - Requested unknown parameter '1' for row 0. For more information about this error, please see http://datatables.net/tn/4

And I got this strings in my table for each row:

[object HTMLTableRowElement]

It works good when I'm using row.add() like this:

var jRow1 = $('<tr>').append('<td><a href="./viewstudent.php?id=150">150</a></td>',
                    '<td>Yasser Moustafa Lotfy</td>',
                    '<td>Website</td>',
                    '<td><b>Language</b>: English, <b>Institution</b>: <a href="./viewinst.php?id=539">Australian Language Schools - ALS</a>, AUS<br><b>Bachelor</b>: Art, <b>Institution</b>: <a href="./viewinst.php?id=1">Australian National University (ANU)</a>, AUS<br><b>Master</b>: Information Technology, <b>Institution (None KPI)</b>: Test University, USA<br><b>Master</b>: MBA, <b>Institution</b>: <a href="./viewinst.php?id=175">Pace University</a>, USA<br></td>',
                    '<td class="hint--left hint--rounded hint--tbl--big" data-hint="Last Update: تم التواصل معك على هذا الرقم ولم يتم الرد، الرجاء التواصل معنا على الرقم 0126136080 في أقرب وقت.">Active</td>',
                    '<td><a href="./viewuser.php?id=2">Ibrahim Alzahrani</a></td>',
                    '<td class="text-center"><a class="table-action" href="./viewstudent.php?id=150"> <i class="fa fa-external-link"></i></a><a class="table-action" href="./editstudent.php?id=150"> <i class="fa fa-pencil-square-o"></i></a><a class="table-action" href="./deletestudent.php?id=150"> <i class="fa fa-trash-o"></i></a></td>');

table.row.add(jRow1).draw();

But not working when I'm using rows.add() like this:

table.rows.add([
                    $('<tr>').append('<td><a href="./viewstudent.php?id=150">150</a></td>',
                        '<td>Yasser Moustafa Lotfy</td>',
                        '<td>Website</td>',
                        '<td><b>Language</b>: English, <b>Institution</b>: <a href="./viewinst.php?id=539">Australian Language Schools - ALS</a>, AUS<br><b>Bachelor</b>: Art, <b>Institution</b>: <a href="./viewinst.php?id=1">Australian National University (ANU)</a>, AUS<br><b>Master</b>: Information Technology, <b>Institution (None KPI)</b>: Test University, USA<br><b>Master</b>: MBA, <b>Institution</b>: <a href="./viewinst.php?id=175">Pace University</a>, USA<br></td>',
                        '<td class="hint--left hint--rounded hint--tbl--big" data-hint="Last Update: تم التواصل معك على هذا الرقم ولم يتم الرد، الرجاء التواصل معنا على الرقم 0126136080 في أقرب وقت.">Active</td>',
                        '<td><a href="./viewuser.php?id=2">Ibrahim Alzahrani</a></td>',
                        '<td class="text-center"><a class="table-action" href="./viewstudent.php?id=150"> <i class="fa fa-external-link"></i></a><a class="table-action" href="./editstudent.php?id=150"> <i class="fa fa-pencil-square-o"></i></a><a class="table-action" href="./deletestudent.php?id=150"> <i class="fa fa-trash-o"></i></a></td>'),
                        $('<tr>').append('<td><a href="./viewstudent.php?id=151">151</a></td>',
                        '<td>Yasser Moustafa Lotfy</td>',
                        '<td>Website</td>',
                        '<td><b>Language</b>: English, <b>Institution</b>: <a href="./viewinst.php?id=539">Australian Language Schools - ALS</a>, AUS<br><b>Bachelor</b>: Art, <b>Institution</b>: <a href="./viewinst.php?id=1">Australian National University (ANU)</a>, AUS<br><b>Master</b>: Information Technology, <b>Institution (None KPI)</b>: Test University, USA<br><b>Master</b>: MBA, <b>Institution</b>: <a href="./viewinst.php?id=175">Pace University</a>, USA<br></td>',
                        '<td class="hint--left hint--rounded hint--tbl--big" data-hint="Last Update: تم التواصل معك على هذا الرقم ولم يتم الرد، الرجاء التواصل معنا على الرقم 0126136080 في أقرب وقت.">Active</td>',
                        '<td><a href="./viewuser.php?id=2">Ibrahim Alzahrani</a></td>',
                        '<td class="text-center"><a class="table-action" href="./viewstudent.php?id=150"> <i class="fa fa-external-link"></i></a><a class="table-action" href="./editstudent.php?id=150"> <i class="fa fa-pencil-square-o"></i></a><a class="table-action" href="./deletestudent.php?id=150"> <i class="fa fa-trash-o"></i></a></td>')
                    ]).draw();

Also here is the debug

Could you please help me to fix it !
And Thanks for this great plugin.

yasserlotfy

Is it very difficult !
Please help me getting rid o it.

yasserlotfy

I have fixed it by using this method:

var jRow = "<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr><tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>";
table.rows.add($(jRow)).draw();

Please update documentation for row.add() and rows.add() for this method because it's not mentioned there.

allan

Actually, I would have expected your original code to have works. Can you check you are using 1.10.9 (I seem to recall in issue about this in earlier 1.10 versions, I think), and if that doesn't help, link to a test case showing the issue please?

Thanks,
Allan

yasserlotfy

I was working on 1.10.9 and it was not working

allan

Thank you for the confirmation. I've made a trivial test case here: http://live.datatables.net/xevohagu/1/edit .

Passing the node in works okay, but passing a jQuery object in - not so much.

I'll look into this and post a fix.

Thanks,
Allan

yasserlotfy

I'm not profissional in js.
what is the meaning of the [0] at end of first row inside rows.add() ?
if I added this [0] at end of each row inside rows.add() it will work smoothly like This

allan

It just gets the node. jQuery is "array like" (i.e. it looks like an array, but isn't actually one) and it contains the DOM elements that have been selected or created. So in this case it get the node at "array" index 0 (since that is where jQuery puts it when it creates an element).

That shouldn't be needed though - this is a bug.

Allan