fnAddTr() Plugin - nTr.getElementsByTagName is not a function

world123

I would like to use the fnAddTr() Plugin

I receive "nTr.getElementsByTagName is not a function" Javascript error.

[code]
$('#rTable').dataTable().fnClearTable();
var oTable = $('#rTable').dataTable();
oTable.fnAddTr("TEST");
[/code]

Any ideas?

world123

OK, it is working now

[code]
$('#rTable').dataTable().fnClearTable();
var oTable = $('#rTable').dataTable();
var row= "TEST";
oTable.fnAddTr($(row)[0]);
[/code]

allan

Yup - the function is expecting a node rather than a string, so using jQuery to create the TR node tree for you does the trick. Thanks for posting back with your answer :-)

Allan

dgm

I'm getting this error, but on page load before I actually call the function; as if it's running the function when it's not supposed to. Also, It says nTr is undefined.

It works in my development mode on rails, but fails on production; the only other difference I can see is that the js files are all joined together into one cache file.

allan

Very interesting - when concatenating the files, I suppose the plug-in function could probably do with a semi-colon to end it - but that's not essential. If you add in a console.log(nTr); into the function - what does it think nTr actually is? Presumably undefined, but something else might give a clue.

Are you able to give me a link to the production system?

Allan

dgm

I rearranged the order that I loaded libraries, and the problem went away. Of particular note, I think the dataTables library itself was not loaded before KeyTable and others... (I suppose the main lib should be loaded before plugins!) But that still doesn't explain to me why it is actually executing the fnAddTr routine, when it should just be parsing it and storing the function.

allan

Yup - the DataTables plug-ins require that DataTables is loaded first, since it extends the DataTables object. In the same way that DataTables required jQuery first.

However, I also can't explain by fnAddTr would be called when parsed. There must be a call to it somewhere, but I can't think of what it would be from your description. Might be worth grepping the code just to make sure you know where all calls to it are.

Allan

kbarkhausen

I wanted to add a series of rows at once to my DATATABLE. I updated the "fnAddTr()" so that you can add in a series of TRs in a single call. If you pass an entire it will take all of the rows and add them to the DataTable. You will probably want to perform a "oTable.fnClearTable();" befire you add the new rows.

See below:

[code]

$.fn.dataTableExt.oApi.fnAddTr = function (oSettings, oData, bRedraw) {

if (typeof bRedraw == 'undefined') {
bRedraw = true;
}

var nTrs = oData.getElementsByTagName('tr');
for (var y = 0; y < nTrs.length; y++) {
//var nTds = nTr.getElementsByTagName('td');
var nTds = nTrs[y].getElementsByTagName('td');
if (nTds.length != oSettings.aoColumns.length) {
alert('Warning: not adding new TR - columns and TD elements must match');
return;
}

var aData = [];
for (var i = 0; i < nTds.length; i++) {
aData.push(nTds[i].innerHTML);
}

/* Add the data and then replace DataTable's generated TR with ours */
var iIndex = this.oApi._fnAddData(oSettings, aData);
oData._DT_RowIndex = iIndex;
//oSettings.aoData[iIndex].oData = nTrs[y];

oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

if (bRedraw) {
this.oApi._fnReDraw(oSettings);
}
}
}

[/code]

I simply call an MVC View that returns an entire table as follows:

[code]
var onSuccess = function (newRows) {
oTable.fnClearTable();
if (newRows.length > 0) {
oTable.fnAddTr($(newRows)[0]);
}
$("button").button();
};
$.ajax({
url: "/Home/GetTableWithRows",
data: data,
success: onSuccess,
dataType: "html"
});
[/code]

Let me know if this helps you.

allan

Nice one - thanks for sharing this enhancement with us!

Allan