Sorting ,pagination and Filtering in a Dynamically Loaded Table

dgupta23

Hi ,
I have the following use case
1. User selects an option from combobox .
2. The onclick event fires an ajax request and the response includes the whole table that needs to be displayed
Problem : as document.readyfunction() fires only once when DOM is loaded so the dynamically created table is not having any pagination,sorting and filtering
So is there any way to fire "document.readyfunction()" again so that table loaded through ajax request is paginated and sorted automatically when it is loaded
Please Note : I am using prototype javascript library to do Ajax request

Any help will be appreciated

Thanks
Deepak Gupta

allan

Hi Deepak,

Why do you need to fun document.readyfunction() again? Can't you just have a function which domes something similar to re-initialise the table or whatever. Or how about:

[code]
var fnBuild = function () {
/* whatever build code is needed */
}

$(document).ready( function () {
fnBuild();
} );

/* then call fnBuild wherever you want to rebuild the initialisation code */
[/code]

Regards,
Allan

btw - this is more of a general Javascript question, which I don't normally answer on these forums - there are better places to get this kind of help. But I'll let it slide this once :-)

dgupta23

Hi allan,

I think I didn't explain my questions quite well in my previous mail
If you still consider that these are general javascript functions then I aplogize for that before hand

1. i have a combo box on page1.jsp and it has for example two different options . Selecting anyone of these options displays different tables altogether on the same page without any page refresh (through ajax response got from event triggered when combo box selection is done )

2. The table that comes part of Ajax response is part of a div tag and this div is inserted inside another div tag present on page1.jsp

[code]



// div from Ajax response





[/code]

As suggesstions made by you in your previous mail I did some changes in my code but still things didn't worked out


[code]
var fnBuild = function (){
var oTable;
oTable= $('#datatablevalueselector').dataTable({
"bPaginate": true,
"bInfo": true ,
"bAutoWidth": true
});
}

jQuery(document).ready(function() {

fnBuild();

} );


// This function will be used to record change in combo box events

function submitCombo(val){
if(val == 'default'){
return;
}


// create an ajax request
var myAjax= new Ajax.Request('strutsComboAction.do',{method:'post',parameters:{selectedValue: val},onSuccess: refreshMyExternalSelector,asynchronous:true });


}

// This portion contains all the Ajax related Content to be displayed on the Web Page
function refreshMyExternalSelector(request, object) {
// retrieve the response from ajax request
//runScripts(document.getElementById("runTableScript"));
var htmlToDisplay=request.responseText;
var div = document.getElementById('emp');
alert(htmlToDisplay);
// div.innerHTML = parseScript(htmlToDisplay);
// loadDatatable(htmlToDisplay);
div.innerHTML =htmlToDisplay;
fnBuild();
// jQuery(function() {
// run this when the HTML is done downloading
// });


}
[/code]

3. The thing to note here is that when fnBuild is called inside document.readyFunction() than we don't have any datatable inside DOM and hence datatable id is null.

Any help will be appreciated

Thanks
Deepak

allan

Hi Deepak,

A general Javascript question - but certainly relevant to initialisation of DataTables ;-)

So is there any need to call fnBuild from $(document).ready()? You say that it gives a JS error - and this sounds fair enough given that there is no element there for it to deal with. So do you only want to build the table when refreshMyExternalSelector() is called? Could you just move the table initialisation in there - or perhaps I am missing something?

Regards,
Allan

flies

Just my two cents - had similar problem when the reponse table was "incorrect" - I mean, no thead or tbody missing tr, everything could be the cause. Check the source :)

dgupta23

Hi Allan ,

There is no need for me to call fnBuild() from $(document).ready(). The reason I did it was following your suggestions in your first reply
I only want to build the table when refreshMyExternalSelector() is called.
So I tried moving the table initialisation in refreshMyExternalSelector() and the code looks like this now .
[code]
var fnBuild = function (){
var oTable;
oTable= $('#datatablevalueselector').dataTable({
"bPaginate": true,
"bInfo": true ,
"bAutoWidth": true
});

}

jQuery(document).ready(function() {

// Commented fnBuild() initialisation in the function
// fnBuild();

} );

// This portion contains all the Ajax related Content to be displayed on the Web Page
function refreshMyExternalSelector(request, object) {
// retrieve the response from ajax request
var htmlToDisplay=request.responseText;
var div = document.getElementById('emp');

div.innerHTML =htmlToDisplay;
fnBuild();


}

3. Allan the only concern I am having over here is that Datatable Engine is not able to format the dynamically loaded table from an Ajax framework that belongs to some other library(prototype ). Does that really make a difference?

To make things more clear
Sample response I am getting from Ajax request

[code]








Check

ATC 1 Code

ATC 1 Description











A01ASTOMATOLOGICALS





[/code]

flies

[code]
class="display"id="datatablevalueselector">
[/code]

Missing space could be a problem
and the table has no tbody - try adding it

EDIT:
One more thing. Try to add setTimeout for few seconds before creating datatable from received data.

allan

Hi Deepak,

Okay I think I am seeing what is going on here.

flies is quite correct is pointing out that the html looks a little dodgy there - perhaps fixing that will help - although I suspect that most html parses will be able to cope with that.

But more critically, your table is not well formed with tbody for DataTables - is is required. please see: datatables.net/usage.

Regards,
Allan