7

次のようにデータをテーブルにロードします。

 $(document).ready(function () {

     var variable= 'sometext'

     $.ajax({
         type: "POST",
         url: "GetJSON.ashx",
         cache: false,
         data: { param: variable},
         dataType: "json",
         success: function (data) {

             var html = '';
             for (var key = 0, size = data.length; key < size; key++) {
                 html += '<tr><td>' + data[key].SessionID + '</td><td>'
                 + data[key].val1+ '</td><td>'
                 + data[key].val2+ '</td><td>'
                 + data[key].val3+ '</td><td>'
                 + data[key].val4+ '</td><td>'
                 + data[key].val5+ '</td><td>'
                 + data[key].Status + '</td></tr>'
             }
             $('#table).append(html);

             otableName = $('#table).dataTable({
                 //"bDestroy": true,
                 "bPaginate": true,
                 "sPaginationType": "bootstrap",
                 "iDisplayLength": 20,
                 "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                 "oTableTools": {
                     "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
                     "aButtons": [
                     "copy",
                     "print",
                     {
                         "sExtends": "collection",
                         "sButtonText": 'Save <span class="caret" />',
                         "aButtons": ["csv", "xls", "pdf"]
                     }
                     ]
                 }
             })

         },
         error: function (xhr, status, error) {
             var err = eval("(" + xhr.responseText + ")");

             alert(err.Message);

         }
     });
 });

これは完全にうまく機能し、見栄えの良いテーブルをレンダリングします。ここで、年 (2009-2013) を含むドロップダウン リストを追加しました。ユーザーが選択すると、別の ashx ページが呼び出され、特定の年のすべてのレコードが取得されます。私が苦労しているのは、この新しいデータセットを既存のテーブルに送信することです。

私はこれを試しました：

 $('#ArchiveYears').change(function () {
        var year = $("#ArchiveYears option:selected").text();

        var senderBIC = 'DIAGGB2LACTB'
        // Need to filter out the table with the year
        $.ajax({
            type: "POST",
            url: "GetJSONYearly.ashx",
            cache: false,
            data: { param: value, year: year },
            dataType: "json",
            success: function (data) {
                var dataTable = $('#table').dataTable();
                dataTable.fnClearTable(this);
                for (var i = 0; i < data.length; i++) {
                    dataTable.oApi._fnAddData(oSettings, data[i]);
                }
                oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
                dataTable.fnDraw();
            }
      });

});

これは、oSettings が宣言されていないことに文句を言います!

では、既存のテーブル コンテンツを削除して新しいコンテンツをロードする最良の方法は何でしょうか?

わかりましたので、あなたの提案に従って、次のことを試しました：

success: function (data) {


                var dataTable = $('#tblMsgDateDetail').dataTable();

                dataTable.fnClearTable();

                dataTable.fnAddData(data);

このエラーダイアログをスローします

addDataの後

奇妙なことに、テーブルは再描画され、正しい量のレコードが表示されますが、データはありません。

4

1 に答える 1

6

ショートレスポンス！

デモ(Thx Allan !)

bDeferRender: true使用することができます

addDataajax呼び出しを追加するために、私の関数を簡単に変更できます

アップデート：

datatable にいくつかの設定を追加する必要があります。ドキュメントを読み始めて、ここでいくつかの例を確認する必要があると思います

このエラーについては、列を定義してチェックする必要がありますsDefaultContent。

例 ：

 $('#example').dataTable( {
    "aoColumnDefs": [
      {
        "mData": null,
        "sDefaultContent": "Edit",
        "aTargets": [ 0 ]
      }
    ]
  } );

更新 2

サーバー側でデータをロードする場合は、この例を確認してください。datatable があなたのために仕事をします。

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "GetJSON.ashx"
    } );
} );

dotnet（サーバー側）を使用している場合は、これを確認できます

更新 3

列をデータテーブルに定義して、「データ」の結果が次のようになる場合:

{ 
"sEcho":1, 
"iTotalRecords":"57", 
"iTotalDisplayRecords":"57", 
"aaData":[ 
{ 
"MsgRef":"JF5465446", 
"Sender":456545645445, 
"Receiver":"Win 98+ / OSX.2+", 
"MsgDate":"2010/02/23", 
"MsgType":"SUCCESS", 
"Currency":"$", 
"Amount":"120.02", 
"B1":"John1", 
"B2":"John2", 
"B3":"John3", 
"B4":"John4", 
"Status":"A" 
} 
] 
}

メモsEchoは、新しい ajax 呼び出しごとにサーバー側でインクリメントする 必要がiTotalRecordsありiTotalDisplayRecords、同じにする必要があります。ここでの行数は、次のように列を設定できます。

$(document).ready(function() { 
$('#example').dataTable( { 
"bProcessing": true, 
"bServerSide": true, 
"sAjaxSource": "GetJSON.ashx", 
"aoColumns": [ 
{ 
"bSortable": false, 
"bSearchable": false, 
"mData": "MsgRef", 
"sDefaultContent": "-" 
}, 
{ 
"bSortable": false, 
"bSearchable": false, 
"mData": "Sender", 
"sDefaultContent": "-" 
} 
//[...] etc 
] 
} ); 
} );

このように、プロパティが null の場合はsDefaultContent、エラーを回避するために null 値を置き換えてください " unknown parameter 0"

サーバー側で作業するには、以下を参照する必要があります。codeproject では 、リクエストとパラメーターの操作方法を学習できます。

たとえば、最初にページをロードすると、datatable が次のように送信します。

sEcho=1&start=0&size=10[...]

ユーザーが次のページをクリックするとき。データテーブルはあなたに送信します:

sEcho=2&start=10&size=10[...]。

ユーザーが次のページをクリックするとき。データテーブルはあなたに送信します:

sEcho=3&start=20&size=10[...]

残りは想像できます...

私はあなたのためにajax呼び出しを行うことはできません! それは例です：

UPDATE 1 のデモJsFiddle

そして、あなたの状況でUPDATE 3を実行することを強くお勧めします!

お役に立てば幸いです。よろしければ、私の返信を確認して投稿を解決してください。私はそれを感謝します！

于 2013-08-10T20:51:59.520 に答える