Sorting ,pagination and Filtering in a Dynamically Loaded Table

Sorting ,pagination and Filtering in a Dynamically Loaded Table

dgupta23dgupta23 Posts: 4Questions: 0Answers: 0
edited July 2009 in General
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

Replies

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    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 :-)
  • dgupta23dgupta23 Posts: 4Questions: 0Answers: 0
    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
  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    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
  • fliesflies Posts: 35Questions: 0Answers: 0
    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 :)
  • dgupta23dgupta23 Posts: 4Questions: 0Answers: 0
    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]
  • fliesflies Posts: 35Questions: 0Answers: 0
    edited August 2009
    [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.
  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    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
This discussion has been closed.