Databases
StackOverflow2013
Postsdbo
POControlling when thead and tbody is populated in serverSide processing in dataTables
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POControlling when thead and tbody is populated in serverSide processing in dataTables
    text
    copied!<p>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.</p> <p>To achieve this i am using tablesorter along with the dataTables plugin. My code looks something like this - </p> <pre><code>$("#ProposalSearchResults").html('&lt;table cellpadding="0" id="proposalsTable" cellspacing="0" border="1 px" class="dataTable tablesorter"&gt;'); $("#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"); } }); } }); </code></pre> <p>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.</p> <p>Can someone please help me out here. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload