DataTables Initialization on dynamically constructed table
DataTables Initialization on dynamically constructed table
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
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
This discussion has been closed.
Replies
[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
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
Even though the test container at the bottom of the page is not encased in any other html
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
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
[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
Thanks for all the good advice and help - I don't know how I would have figured it out without your assistance.
@nbmarshall - Please link to a test case.
Allan
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.
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]
Why not initialise DataTables in the success callback?
Allan