DataTable breaking when php page is refreshed

Dew60drop

debug code: ukazac - unfortunately I cannot provide a link.

I'm new to datatables and not very javascript savvy so help would be much appreciated!

Basically I have a webpage (dashboard.php) that has a datatable that is constantly refreshed but the datatable breaks on refresh (event handlers disappear, styling rows gone, etc).

To create the table I start with a and then call the corresponding webpage(dash_server.php) to load inside that div window without ever leaving the dashboard.php. The table creation and data calls all happen within the dash_server.php page. So if I go directly to dash_server.php the table loads fine and everything is great. However if I stay on the dashboard.php page the table loads fine and then breaks when its refreshed.

This is the code on the dashboard.php page that calls the dash_server.php inside the div window:
echo "\n";
echo "url$window_num='$filename'; updatearea$window_num='$window_name'; refresh$window_num=$refresh; addOnLoad($ajax_call);\n\n";
echo " \n";

I read somewhere that if the portion of the table is refreshed then it gets messed up. However at this point in time I can't change where the table is loaded, it has to all be within the dash_server.php page.

So my question is how to get my datatable to stay functional when its called in a separate webpage window and constantly refreshed?

My code for calling the datatable is pretty simple:


This would be my JS

$(document).ready(function() {
/* Table initialisation */

if ($('#example_pdf').length){

$('#example_pdf').dataTable( {
"sDom": '<"row-fluid" <"pretty_header_left" f><"pretty_header_left" l><"pretty_header_right hidden-phone" T>r>tip',
"sPaginationType": "full_numbers",
"oTableTools": {
"sSwfPath": "/bootstrap/js/include/assets/DT/swf/copy_csv_xls_pdf.swf",
"aButtons": [
// copy layout
{
"sExtends": "copy",
"sButtonText": ''+" Copy"
},
// print layout
{
"sExtends": "print",
"sButtonText": ''+" Print View"
},
{
"sExtends": "collection", // dropdown save button
"sButtonText": ''+" Save",
"aButtons": [
"xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape" //makes landscape pdf files
}
]
}
]
} //end TableTools
} );

}// end if
} );

Any advice you could give me would be greatly appreciated. I've been trying to figure this out for over a week and can't find any problem/solution that mimics my situation.

systematical

If you are just reloading the page this should not happen. Are you reloading the page via AJAX or a browser refresh using JavaScripts window.location or something like that? Tell us how you are refreshing the page. Also give us a better example of your HTML tables markup.

Dew60drop

We are refreshing the page via an AJAX call. There are multiple DIV windows on the main page and each has it's on AJAX call and can be refreshed at different intervals.

Here is the table markup. Let me know if you need more information:

echo ("\n");
echo (" \n");
echo (" \n");
echo (" \n");
echo (" Location 1\n");
if ($locations > 1) echo (" Location 2\n");
if ($locations > 2) echo (" Location 3\n");
echo (" \n");
echo (" \n");
echo (" Server Name\n");
.....
echo (" \n");
echo (" \n");

echo (" \n");
echo (" \n");
echo (" $field1\n");
.....
echo ("\n");
echo ("\n");
echo ("\n");

I removed the column headers and data for each column to condense it.

systematical

If you are recreating the markup for datatables after the Ajax response is received then you must also LIKELY re instantiate datatables on that table (in your javascript code), in this case example_pdf. You might even need to first destroy the instance of datatables and then reload it.

Try this or maybe I don't undertstand.

Dew60drop

Thanks for the reply. My javascript knowledge isn't very strong but here is what I tried:

First I added the 'destroy' to the example_pdf function but to no avail:

$('#example_pdf').dataTable( {
"sDom": '<"row-fluid" <"pretty_header_left" f><"pretty_header_left" l><"pretty_header_right hidden-phone" T>r>tip', // organizes the heading
"sPaginationType": "full_numbers",
"destroy": true,
.....

Then I added the following to the php file and still no luck.

var oTable = $('#example_pdf').dataTable();
oTable.fnDestroy();


Is there something else I am missing that I need to add to the example_pdf code?