dataTablesのserverSide処理でtheadとtbodyが入力されたときを制御する

Question

私は、DataTablesプラグインを使用してテーブルのajax呼び出しをフェッチしてページを作成しています。 私の必要条件は、フェッチしたもの、つまりサーバー側のフェッチ中にクライアント側のソートだけをソートする必要があることです。

これを達成するために、私はtablesTablesプラグインと共にtablesorterを使用しています。今ここでの問題は、初めに、テーブルのthead要素とTBODYが形成されていないので、tablesorter（）の呼び出しを返すと、クライアント側ソートが達成されないということである

$("#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"); 
        } 
       }); 
      } 
     }); 

- 私のコードは次のようになります。 最初にtheadとtbodyを作成してから、それをajaxを通して読み込むと、同じことができます。 私はdataTablesのコードをデコードできませんでしたので、どのメソッドが実際にこれらのtbodiesとtheadをテーブルに描画/書き出しているのか知りません。テーブル内でこの呼び出しを持つようにオーバーライドすることもできます。

ここで私を助けてもらえますか？

Answer 1

dataTables（）の呼び出し後に$("#proposalsTable").tablesorter();を呼び出す必要があります。このようにして、テーブルテーブルイベントをアタッチできる<thead>セクションと<th>セクション（すべて適切なマークアップなど）が作成されます。 そうした場合、イベントを添付するために<th>が存在しないため、tablesorter()は失敗します。 DOM内の既存の要素にのみイベントをアタッチすることができます（OK、jQuery live（）のようにDOMを準備した後に追加された要素にアタッチする方法はいくつかありますが、tablesorterはそれらを使用していないと思います） caseデータ型は、表のマークアップを作成します。