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.
请允许我在这里帮助我。