Clicking Column Clears Contents... Consistantly :)

PJ

I really like the potential that this plugin has.

To its credit, the columns render properly.
When the User clicks on an image, triggering an onclick event that loads json data, the data renders properly.

Then things go wierd.
When the User clicks on any column to sort it, the table contents goes blank and all that's left is the DataTable column names with the arrow icon showing that the column was sorted.

I'm sure I'm missing something.

Here's some background info:
IE 8.0
jQuery v1.4.1
jquery.dataTables.min.js v1.7.4

= = = = ==

HTML BLOCK
[code]



Code
Name
Title
Institution





[/code]
= = = = =

INITIAL LOAD Results with:

Code Name Title Institution
No data available in table <====== I've confirmed that this is sEmptyTable instead of sZeroRecords.

Showing 0 to 0 of 0 entries <======



EXECUTE jQUERY METHOD (with an onclick event on an image - no used)

...
[code]
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: passURL,
dataType: "json",
success: function (data) {
// load select list
if (data.length > 0) {
for (temp in data) {
var item = data[temp];
$('#ResultsTable')
.append($('')
.append($('').text(item.RespCode))
.append($('').text(item.FullName))
.append($('').text(item.Title))
.append($('').text(item.Institution)));
}
} // load data

$('#AjaxLoading').fadeOut();
},
error: function (data) {
alert('err in loadresults');
}
}); // ajax
[/code]
...




PAGE RENDERS THE DATA CORRECTLY (however)


Code Name Title Institution
No data available in table <================== sEmptyTable
123 aetjat glegjs hykwthgnwt
2135472 dthsgn aasat rtnwrsfg
2355 zdfhj vchkty xfghkletwr
97465 mhxhk hgjo wrsfnyxfidf
3568 thsfi nethi afgujrnwerty

Showing 0 to 0 of 0 entries <==================



WHEN I TRY TO SORT A COLUMN, the rows disappear, leaving only the column headers and the sort icons.

I figure, I have to do some post initialization processing.
I tried the iTable example w/ function display_results() but nothing different happened.

Any Insights?

Thanks,
PJ

allan

You are adding data to the table through DOM methods, rather than through the DataTables API. There is no listener on the table DOM, so DataTables doesn't automatically know when a new row has been inserted in this manner, and therefore does not know anything about the new data.

The way to do this is to utilise the API function fnAddData ( http://www.datatables.net/api#fnAddData ) or the fnAddTr plug-in method ( http://datatables.net/plug-ins/api#fnAddTr ). Adding a new row can be seen here: http://datatables.net/examples/api/add_row.html .

Allan

PJ

LOL!

So easy!

Perfect, absolutely perfect.

I just tweaked the .append(...) block in my ajax lookup
to your .dataTable().fnAddData( [...]); block

and it works great!

Thanks!

PJ

One additional thing...

I was adding about a thousand rows. The browsers took forever to render things.

Then I discovered the little aside note:
fnAddData()
2. # boolean : optional - redraw the table or not after adding the new data (default true)

In my case, 'new data' meant redrawing after EACH row was added.

By tacking on FALSE to my $().dataTable().fnAddData([],false) statement, things really flew.

Thanks again for your time and efforts!