Using dynamic content with two subsections (menus), both using DataTables gives problem initializing

nicsoft

I've been developing for quite some time now using DataTables, really nice plug-in. Now, when getting closer to the end I stumble upon a problem which I realize wasn't that easy to solve when searching around for a while.

I have a main page (index.php) which I load first. Then I have two submenus. I click one and dynamic content containing my table is loaded into a div. When clicking the other menu the same thing happens.

The problem is that I am using the same javascript and php-files on the server side. I never considered it would be a problem when deciding for my implementation and of course I would like to reuse my code not doing everything twice (I know I have other applications which contains many tables which I intend to apply DataTables to also). I send which menu/link I clicked to the server side when initializing the table (adding '?page=xxx' for the sAjaxSource-URL). A for that menu tailor made table is returned. The server-side shouldn't be part of the problem I'm pretty sure.

I am getting the data using sAjaxSource but handle pagination, etc. on the client side.

As I understand, this design is not possible since you can not destroy and create a DataTable-table without refreshing the entire site which is exactly what my intention is should never happen.

Has anyone got any idea how to circumvent this problem, would be most appreciated? It really feels like a dead-end right now...

nicsoft

I solved it using two functions, one is called when one menu entry is selected the other one when the other is selected. Withing those function I did necessary reseting and loading. I can live with keeping the oSettings between the table, it may even be a good thing.

oTable must be global.

Example:

[code]$("#overview").on('click', function(e){ //Menu 1

//Check that the table exists, don't want to do things on nothing
if(oTable != null || oTable=='undefined'){
oTable.fnFilterClear();
oTable.fnReloadAjax();
}

//Store wich page it is clicked for future us (I had to hide some div after the page was loaded)
page = $(this).attr('id');

//This is my handler in which I do a lot of things, among others oTable = $('#mytickettable').dataTable
mytickethandler();
});

$("#myticketsmenu").on('click', function(e){ //Menu 2

//Check that the table exists
if(oTable != null || oTable=='undefined'){
oTable.fnFilterClear();
oTable.fnReloadAjax();
}
page = $(this).attr('id');
mytickethandler();
});[/code]