0

日付ピッカーの選択に基づいて、新しい日付で DataTables をロードするにはどうすればよいですか。

クライアント側の Ajax 呼び出しを使用してデータが読み込まれ、日付範囲に基づいて新しいデータセットを作成したいと考えています。

関数を呼び出してデータをリロードすると、初期化エラーが発生します。私はテーブルを破壊しようとしましたが、もう一度描画しましたが、何もしませんでした。

Ajax 呼び出し:

   var getMessageDate = function () {

   var tdata;

      console.log(fromDateSelection);

      $.ajax({
         type: "POST",
         url: "DataTable.aspx/GetSummary",
         data: JSON.stringify({ "sender": $('#ddBICS :selected').val(), "date": $('#fromDateSelection') }),
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         success: function(result) {

         tdata = jQuery.parseJSON(result.d);

         oMessageDate = $("#tblDataTable").DataTable({
            data: tdata,
        });
    }
  });
}

日付変更イベントの選択は次のとおりです。

  $('#fromDate').datepicker({
    format: "yyyy-mm-dd",
    todayBtn: "linked",
    orientation: "auto left",
    forceParse: false,
    autoclose: true,
    todayHighlight: true,
   }).on('change', function () {

   getMessageDate();
   fromDateSelection = $('#fromDate').val();
 });

日付の選択後に DataTable を再構築するにはどうすればよいですか?

4

2 に答える 2

1

あなたはこのようにすることができます

var datatableObj = $("#tblDataTable").DataTable(); // In global scope

すべての行を削除するには

datatableObj.clear() // to clear the existing data. Remember this will not redraw the empty table. to redraw, append .draw() with .clear()

たす

datatableObj.rows.add([ {
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "salary":     "$3,120",
    "start_date": "2011/04/25",
    "office":     "Edinburgh",
    "extn":       "5421"
}, {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
} ] )
.draw(); // Use add function of rows object to add multiple tr. and finally draw the datatable

詳細については、ドキュメントを確認してください

アップデート

以下のコードを使用してください

var oMessageDate = $("#tblDataTable").DataTable(); 

var getMessageDate = function () {

   var tdata;

    console.log(fromDateSelection);

    $.ajax({
        type: "POST",
        url: "DataTable.aspx/GetSummary",
        data: JSON.stringify({ "sender": $('#ddBICS :selected').val(), "date": $('#fromDateSelection') }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            tdata = jQuery.parseJSON(result.d);
            oMessageDate.clear().rows.add(tdata).draw();
        }
    });
}

また、私はfromDateSelection = $('#fromDate').val();前に来る必要があると思いますgetMessageDate()

于 2014-12-08T09:50:34.533 に答える