fnAddData Add multiple rows at once. Show/hide table

cmp241

Hi,

I use fnAddData to add a single row to the datatable at a time. My issue is that it takes time to add 300+ rows to a table so I figured that I can hide the table and then show it when its done. I basically followed what this discussion stated, http://datatables.net/forums/discussion/comment/16198

but that doesn't work for me. It seems like the json completes before the rows are added to the datatable so I can see it being added.

[code]
var oTable = $('#table_id').dataTable({
"bPaginate": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"iDisplayLength": 10,
"bLengthChange": false,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
$('#table_id_wrapper').hide();
$.getJSON("abc.json", function(data){
$(data.terms).each(function(index){
var addData = [];
addData.push($(this).attr('a'));
addData.push($(this).attr('b'));
addData.push($(this).attr('c'));
addData.push("d");
...
...
...
oTable.fnAddData(addData);
});
});
$('#table_id_wrapper').show();
oTable.fnAdjustColumnSizing();
[/code]

I figured someone can show me how to hide and show a table properly or I can use a two dimension array and add all the rows to it in the for each and then afterwards use fnAddData. I just don't know the proper syntax to add multiple rows/two dimension array at once.

Any help will be appreciated.

thanks!

allan

> oTable.fnAddData(addData);

Oof! Use the second parameter and set it to `false` ! Otherwise the table is doing a full redraw for every row added, hence the time.

DataTables 1.10 has a new `rows.add()` API method for adding multiple rows at a time to make it a bit easier!

Allan

cmp241

Thank you! Setting the second param of fnAddData did the trick. I was trying to use the [quote]rows.add()[/quote] method. But I can't access it via

[code]
oTable.rows.add($(this).attr('a'), $(this).attr('b'), $(this).attr('c'), $(this).attr('d'), $(this).attr('e'));
[/code]

I get the following error:

[quote]
Uncaught TypeError: Cannot call method 'Add' of undefined
[/quote]

I'm using verion 1.10 of datatables.

I observed what you did in the jquery.dataTables.js:

[code]
this.fnAddData = function( data, redraw )
{
var api = this.api( true );

/* Check if we want to add multiple rows or not */
var rows = $.isArray(data) && ( $.isArray(data[0]) || $.isPlainObject(data[0]) ) ?
api.rows.add( data ) :
api.row.add( data );

if ( redraw === undefined || redraw ) {
api.draw();
}

return rows.flatten().toArray();
};
[/code]

But I still can't figure out how to access [quote]rows.add()[/quote]