2011-05-22 18 views
15

から追加情報を返します。Jquery Datatablesは、JQuery Datatablesを使用してサーバ

クライアントからサーバーに追加情報を送信する方法を検討しました。さて、私は逆に戻って行きたいです。

サーバーからクライアントに余分な情報を送信するにはどうすればよいですか。返されたJSONに余分なエントリを追加して、どこかに引き出すことができると思っていたでしょう。返信したいと思うアイテムは、サーバーが応答を処理するのにどれくらいの時間がかかったかというものです。この情報をユーザーに表示することができます。

ご協力いただければ幸いです。ありがとう

+0

Hey Lee、fnServerDataを使用してクライアントからサーバーに追加情報を送信する方法を担当しています。あなたは私を助けてくれますか? –

答えて

16

私はあなたが非常にすべての権利を持っていると思います。追加のデータ・サーバー側をJSONオブジェクトに添付して、それを「fnServerData」で取得するだけです。あなたはinizializationオブジェクトにこのコードを追加することができます:必要な多くのパラメータを追加することができます

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.getJSON(sSource, aoData, function (json) { 
//Here you can do whatever you want with the additional data 
       console.dir(json); 
//Call the standard callback to redraw the table 
       fnCallback(json); 
      }); 
     } 

サーバー側:通常は3つのパラメータ「iTotalRecords」(行の合計数)、「iTotalDisplayRecords」とJSONを持っています(フィルタを使用している場合はフィルタリングされた合計)およびaaData(行がある連想配列)です。あなたは「iProcessingTime」たとえば追加する場合(これはサーバ側の処理にかかった時間は)あなたが行うことができます:

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.getJSON(sSource, aoData, function (json) { 
//take the processing time and put it in a div 
       $('#processingTime').html(json.iProcessingTime); 
//pass the data to the standard callback and draw the table 
       fnCallback(json); 
      }); 
     } 

が、これは何が必要ですか?

+0

多くのありがとう。ちょうど私が必要なもの。 – Lee

+0

@nicola:クライアントからサーバーにパラメータを送信する方法を教えてください。私のHTMLページ上の選択されたコンボボックスの値を、自分のAjaxSourceであるコントローラに自分のデータテーブルに渡そうとしています。 –

2

@ニコラ・ペルチェッティの答えが正しい。しかし、あなたは、この例http://datatables.net/release-datatables/examples/server_side/post.html以下であり、(何らかの理由で)getJSONを使用したくない、これはあまりにも

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.ajax({ 
       "dataType": 'json', 
       "type": "POST", 
       "url": sSource, 
       "data": aoData, 
       "success": function(json){ 
        $('#processingTime').html(json.iProcessingTime); // iProcessingTime is the variable that we added in JSON at the server side 
        fnCallback(json); 
       } 
      });    
     } 
3

作品は「fnInitComplete」機能を使用してJSONファイルからの情報にアクセスすることも可能である場合には、テーブルの描画イベントが完了した後(データローを含む)呼び出されます。

$('#example').dataTable({ 
    "fnInitComplete": function(oSettings, json) { 
     //Do something with json variable 
    } 
    }); 
+0

これは私が探していたものです。 –

1

上記の提案は役に立ちませんでした。

私はajaxサーバーサイドのページング可能な実装を持っています。ユーザーが新しい検索語を入力すると、それを更新する必要があります。したがって、 "fnInitComplete"を使用するのはオプションではありません。DataTableオブジェクトが初期化されるときに1回だけトリガされるためです。

fnServerDataを無効にすることもできませんでした。

はので、代わりに私がdataSrcの経由JSONからiProcessingTimeをつかんで、それを実装終了:

var table = $('#pkgTable').DataTable({ 
    "processing" : true, 
     "serverSide" : true, 
     "sPaginationType" : "jPaginator", 
     "ajax": { 
      "url" : urlStr, 
      "type" : "POST", 
      "dataSrc": function(json) { 
      var iProcessingTimeMS = json.iProcessingTime; 
      var iProcessingTimeS = iProcessingTimeMS/1000; 
      $("#processingTime").html("Search Time: " + iProcessingTimeMS + " ms. " + iProcessingTimeS + " s."); 
      return json.aaData; 
     } 
     }, 
     "oLanguage": { 
      "sProcessing": "<span style='color: red; font-weight: bold'>Please Wait...</span>", 
      "sZeroRecords": "No Records Found...", 
      "sSearch":  "Search All:", 
      "sUrl":   "", 
      "oPaginate": { 
          "sFirst" : "<b>&lt;&lt;</b>", 
          "sLast"  : "<b>&gt;&gt;</b>", 
          "sPrevious" : "<b>&lt;</b>", 
          "sNext"  : "<b>&gt;</b>" 
        }, 
      "sLengthMenu": 'Display <select>' + 
        '<option value="10">10</option>' + 
        '<option value="20">20</option>' + 
        '<option value="50">50</option>' + 
        '<option value="100">100</option>' + 
        '</select> records' 
     } 
}); 
0
<div id="category"></div> 

$('#example').dataTable({ 
    "fnInitComplete": function(oSettings, json) { 
     $('#category').html(json.category); 
    } 
    }); 

これが私のために正常に動作するようです。

1
"fnDrawCallback": function(oSettings) { 
    console.log(oSettings.json);//do whatever with your custom response 
    }, 
関連する問題