DataTables Initialization on dynamically constructed table

Pavilion

Hello:

I've an html table dynamically constructed in a php file. The table id is logTable


When the user page is loaded, I use $.getJSON to grab the table and display it on the user page as follows:

[code]
$.getJSON("ol_LogTable.php", {filterVal:1}, function(data) {
$('#activityLog').html(data); // where activityLog is a container
});
[/code]

Once JSON grabs and displays the table, I'm trying to initialize DataTables on the dynamically constructed logTable as follows:
[code]
$('#logTable').dataTable();
[/code]

I can initialize DataTables on a resident html table, so I know the required files are appropriately declared. But the minute I try to initialize DataTables on the table constructed in another .php file I run into problems.

Any and all advice is welcome.

Thanks Much:

Pavilion

Pavilion

OK - I changed my JSON call. So now my script is as follows:

[code]
$.getJSON("ol_LogTable.php", {filterVal:1}, function(data) {
$('#activityLog').html(data);
var LogClass = $('#logTable').attr('class');
console.log("log Class: " + LogClass);
$('#logTable').dataTable();
});
[/code]
The console.log is reporting the correct class. So I'm able to successfully use $('#activityLog') to grab appropriate table information.

But the initialization
[code]$('#logTable').dataTable();[/code]
Is still not producing anything in the header area.

The initialization does produce the following message if the table has no records:
[quote]
No data available in table
Showing 0 to 0 of 0 entries
PreviousNext
[/quote]

But the headers are still not capable of sorting and there is no search input in the header.

Any advice would be appreciated.

Thanks in Advance: Pavilion

allan

Are you able to link us to the page so we can see what is going wrong?

Allan

Pavilion

Hello Allan:

Here's a link: http://www.myofficelog.com/logT/olT.php

This page is in Test phase, so it's not pretty. But you should be able to see the problem log table.

The table is constructed in php and a JSON call is used to grab it and render on this page.

Thanks much: Pavilion

Pavilion

One more note - I've tried dumping the JSON return data into the test container at the bottom of the page. The results are the same.

Even though the test container at the bottom of the page is not encased in any other html

Pavilion

Also - just tried removing all the class designations and

Pavilion

OK - I've stripped the test page of everything EXCEPT two tables needed for testing. The new Test page can be found here: http://www.myofficelog.com/logT/olP.php

The top table is dynamic, called from a php processing page.

The bottom table resides on the current page and is hard coded.

The bottom table initializes.

The top table defaults to a populated group: "History". It does not initialize.
However, if an unpopulated group is chosen, such as "unread", then the table initializes.

Looking for advice here on how to find the problem.

Thanks in Advance - Pavilion

Pavilion

This is the most confusing situation. Check console.log when you're testing this page. Watching console.log reveals the following:

1. A setTimeout function delays initialization of #logTable until after a log group has been chosen.
2. If a log group (such as "Unread") with no data is chosen initialization of #logTable is successful.
3. If a log group (such as "History") with data in it is chosen, initialization of #logTable is not successful. The last console.log line ("data table applied") does not show up, which means, something got hung up between the console.log line ("timeout function begins") and the command $('#logTable').dataTable();.

The million dollar question is: Why would data already rendered in a table stop initialization? The timeout is long enough that the eye can physically see console.log ("timeout function begins") display AFTER data is rendered in the table. So ... why the hangup?

Any suggestions as to where the problem might be are greatly appreciated.

Pavilion

Pavilion

Here's a clue. When I select a log group WITH data and the initialization does NOT complete, the following JS error is generated:

[quote][06:47:03.840] TypeError: nCell is undefined @ http://www.mysite.com/DataTables/media/js/jquery.dataTables.js:669[/quote]
Anyone have any ideas what this error is? And how do I deal with it?

Thanks again - Pavilion

Pavilion

I finally figured out the problem.

Thanks for all the good advice and help - I don't know how I would have figured it out without your assistance.

nbmarshall

Hi - what was the solution to this as I am having the exact same issue. Cheers Neil

allan

@Pavilion - Sorry I didn't manage to reply to you previously. I missed the updates to this thread back in June.

@nbmarshall - Please link to a test case.

Allan

nbmarshall

I will see what I can do, but its mainly as above.

If its a standard HTML Table it works as describe. But If i have created the table dynamically then it seems not to fire. If I have a portion of the table as static HTML, it initialises with 'No data' but then my data appears below but it cannot be searched / sorted.

nbmarshall

Ok, sorry for the quick and dirty code - but I cant share the page right now;

As an example -

The below will render the datatable correctly

[code]
HTMLMiddleElement = "CountryVintageVariableDescriptionDatabase"
HTMLMiddleElement = HTMLMiddleElement + "UK2012Var1Any type of varThe Big One"
HTMLMiddleElement = HTMLMiddleElement + "UK2012Var2Any type of other varThe Big One"
HTMLMiddleElement = HTMLMiddleElement + "UK2013Var1NoneThe Big One"
HTMLMiddleElement = HTMLMiddleElement + "CountryVintageVariableDescriptionDatabase"
$tableItem = $("#TestingTableSort");
$tableItem.html(HTMLMiddleElement);


$('#example').DataTable(
{ "bAutoWidth": true,

"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "500px"
}

);

[/code]


However

This - renders the HTML table correctly but will not render the datatable plugin correctly.

[code]
$.ajax({
url: 'PageUI_Testing/CreateFullTable',
type: "POST",
dataType: "json",
data: "{}",
contentType: "application/json, charset=utf-8",
success: function (result) {


HTMLMiddleElement = "CountryVintageVariableDescriptionDatabase"
$.each(result.aData, function (j, lHelp) { HTMLMiddleElement = HTMLMiddleElement + "" + lHelp.Country + "" + lHelp.Vintage + "" + lHelp.VariableN + "" + lHelp.VariableD + "" + lHelp.DatabaseS + "" });
HTMLMiddleElement = HTMLMiddleElement + "CountryVintageVariableDescriptionDatabase";
$menuCountry = $("#TestingTableSort");
$menuCountry.html(HTMLMiddleElement);
}

});

$('#example').DataTable(
{ "bAutoWidth": true,

"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "500px"
}

);
[/code]

allan

Looks like you are changing the HTML after you initialise DataTables. Which is always going to result in a bit of a mess :-).

Why not initialise DataTables in the success callback?

Allan