English 中文(简体)
在服务器中有人居住的发病人和拖车时的控制 数据处理
原标题:Controlling when thead and tbody is populated in serverSide processing in dataTables

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.

请允许我在这里帮助我。

最佳回答

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.

问题回答

暂无回答




相关问题
getGridParam is not a function

The HTML: <a href="javascript:void(0)" id="m1">Get Selected id s</a> The Function: jQuery("#m1").click( function() { var s; s = jQuery("#list4").getGridParam( selarrrow )...

selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

jQuery cycle page with links

I am using the cycle plugin with pager functionality like this : $j( #homebox ) .cycle({ fx: fade , speed: fast , timeout: 9000, pager: #home-thumbs , ...

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

jConfirm with this existing code

I need help to use jConfirm with this existing code (php & Jquery & jAlert). function logout() { if (confirm("Do you really want to logout?")) window.location.href = "logout.php"; } ...

Wrap text after particular symbol with jQuery

What I m trying to do, is wrap text into div inside ll tag. It wouldn t be a problem, but I need to wrap text that appears particularly after "-" (minus) including "minus" itself. This is my html: &...

热门标签