Controlling when thead and tbody is populated in serverSide processing in dataTables

Question

I am using DataTables plugin to fetch and paginate my table use ajax calls. My requirement is that I need to sort only the ones that I have fetched i.e. client side sorting while Server side fetching.

To achieve this i am using tablesorter along with the dataTables plugin. My code looks something like this -

$("#ProposalSearchResults").html('<table cellpadding="0" id="proposalsTable" cellspacing="0" border="1 px" class="dataTable tablesorter">');
        $("#proposalsTable").tablesorter();
        $("#proposalsTable").dataTable({
            "bPaginate": true,
            "bJQueryUI": true,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": false,
            "bServerSide":true,
            "iDisplayLength": 10,
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                            {"sTitle" : "Proposal Id"},
                            {"sTitle" : "Release Candidate Id"},
                            {"sTitle" : "Proposal Description"},
                            {"sTitle" : "Application"},
                            {"sTitle" : "Requester"},
                            {"sTitle" : "Proposal Status"},
                            {"sTitle" : "Proposal Creation Date", "sType": "full_date" },
                            {"sTitle" : "Proposal Planned Deployment Date", "sType": "full_date" },
                            {"sTitle" : "Action"}
                        ],
            "sAjaxSource": "/searchProposals",
            "fnServerData": function(sSource, aoData, fnCallback){
                aoData.push({"name" : "searchCriteria", "value" : JSON.stringify(proposalSearchCriteria)});

                $.ajax({
                    "dataType": "json",
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : function (serviceOutput){
                        fnCallback(serviceOutput.ret);
                        $("#proposalsTable").trigger("update");
                    }
                });
           }
        });

Now the problem here is that because in the beginning, the thead and tbody of the table are not formed, the call to tablesorter() returns and client side sorting is not achieved. While, when I do the same with creating thead and tbody first and then populating it through ajax, it works. I have not been able to decode the code of dataTables so dont know which method is actually drawing/writing these tbodies and thead in the table, which can be overriden to have this call to tablesorter in it too.

Can someone please help me out here.

Have you tried calling $("#proposalsTable").tablesorter(); after initializing datatables? — Nicola Peluchetti
I wrote an answer with a short explanation of what i thought it was going on. Simply, when you call tablesorters there are no <th> to attach events to, you have to create them by calling datatables(); — Nicola Peluchetti

Nicola Peluchetti Nicola Peluchetti · Accepted Answer · 2011-06-21T15:13:27

You should call $("#proposalsTable").tablesorter(); after the call to dataTables(). In this way datatables creates the <thead> and all <th> sections (all the proper markup and so on) on which you can attach tablesorter events. If you do as you did, there are no <th> to attach events to and so tablesorter() fails. Remember that you can attach events only to elements alredy existing in the DOM (ok, there are some ways to attach also to elements added after the DOM is ready like jQuery live() but i don't think tablesorter uses them), in you case datatables creates the markup for the table.

Controlling when thead and tbody is populated in serverSide processing in dataTables

1 Answers