2

承認ボタンがクリックされ、ajax リクエストが成功すると、データテーブルを再描画しようとしています。

すべてがクリック機能で機能します（データベースに保存、アニメーション化、スライドアップ）が、テーブルは再描画されません。

なぜそれが機能しないのかについて何らかの考えを持っている体はありますか?

  $('a.approve').click(function(e) {
    e.preventDefault();
    var parent = $(this).closest("tr");
    $.ajax({
      type: 'get',
      url: 'index.php',
      data: 'ajax=1&approve='+ parent.attr('id').replace('record-','')+'&employee='+ parent.attr('title')+'&acyear=' + parent.attr('lang'),
      beforeSend: function() {
        parent.animate({'backgroundColor':'#fb6c6c'},300);
      },
      success: function() {
        parent.slideUp(300,function() {
          parent.remove();
        var $aTable= $("#table_a").dataTable( { bRetrieve : true } );
        var $bTable= $("#table_b").dataTable( { bRetrieve : true } );
        $aTable.fnDraw();
        $bTable.fnDraw();
        });

      }
    });
  });
4

4 に答える 4

0

あなたの正確なニーズを理解するのに十分なコードがありません。

あなたのparentvarはあなたのdataTablesの1つの行を表し、dataTableからそれを削除したいと思います。

dataTable はそのデータの内部キャッシュを保持し、呼び出しparent.remove()によってこのキャッシュは更新されません。

dataTable から行を削除する場合は、API 関数fnDeleteRowを使用する必要があります。

// remove your "parent.remove()" line
$aTable.fnDeleteRow(parent[0])
于 2012-08-29T16:44:09.223 に答える
0

データベースから新しいテーブル データを取得するにindex.phpは、テーブルの値を JSON として返す必要があります。

{
  "sEcho": 1,
  "iTotalRecords": "2",
  "iTotalDisplayRecords": "2",
  "aaData": [
    [
      "Gecko",
      "Firefox 1.0",
      "Win 98+ / OSX.2+",
      "1.7",
      "A"
    ],
    [
      "Gecko",
      "Netscape Navigator 9",
      "Win 98+ / OSX.2+",
      "1.8",
      "A"
    ]       ]
}

そして成功の部分：

success: function(json) {
        parent.slideUp(300, function() {
            parent.remove();

            var obj = JSON.parse(json);//get new data
            oTable.fnClearTable();//clear table
            for (x in obj.aaData)
                oTable.fnAddData(obj[x]); //populate table

            //redo another ajax if you have several table.
        });

1 行だけが変更された場合は、その行を削除し、JSON でサーバーからその行を返し、その行をテーブルに再挿入します。

于 2012-08-31T02:12:02.287 に答える
-1

oTable.fnReloadAjax();成功後のリバインドテーブル

$(document).ready(function () {

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
    if (typeof sNewSource != 'undefined' && sNewSource != null) {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams(oSettings, aData);

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable(oSettings);

        /* Got the data - add it to the table */
        var aData = (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

        for (var i = 0; i < aData.length; i++) {
            that.oApi._fnAddData(oSettings, aData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
            oSettings._iDisplayStart = iStart;
            that.fnDraw(false);
        }

        that.oApi._fnProcessingDisplay(oSettings, false);

        /* Callback user function - for event handlers etc */
        if (typeof fnCallback == 'function' && fnCallback != null) {
            fnCallback(oSettings);
        }
    }, oSettings);
}
});
于 2012-08-22T13:42:28.900 に答える