Javascript - 行を編集した後にDatatablesの列の順序を更新する

Question

データベースを更新する正常に返されたajax呼び出しの後にDatatable行のセルを更新するjavascriptがあります。すべてが良いです。データが変更されたため、Datatableのソートを更新したいのですが、これを行う方法を理解できません。

私のコードを見る必要があるかどうかわかりません。私は列を並べ替えるためにdatatable関数が必要だと思っていますが、マニュアルで見つけることができます。だから、あなたの指導のための私のコードです。

$(document).ready(function(){ 

    // --------------------------------------- 
    // load datatabes 
    // --------------------------------------- 
    $('#tabledata').DataTable({ 
    columnDefs: [ 
     { targets: 2, visible: false }  
    ] 
    }); 

    // --------------------------------------- 
    // global variables use for updating row data 
    // --------------------------------------- 
    table = $('#tabledata').DataTable(); 
    row = ''; 
    row_data = []; 

    // --------------------------------------- 
    // highlight selected table row & show 'edit' button upon row click 
    // --------------------------------------- 
    $('#tabledata tbody').on('click', 'tr', function() { 

    if ($(this).hasClass('trselected')) { 
     $(this).removeClass('trselected'); 
     $("#edit_row").hide("slow"); 
    } else { 
     $("#tabledata tbody tr").removeClass("trselected"); 
     $(this).addClass('trselected'); 
     $("#edit_row").show("slow"); 
    } 

    //save row data for use later 
    row = table.row(this);  
    row_data = table.row(this).data(); 
    }); 

    // --------------------------------- 
    // The edit button has been clicked 
    // --------------------------------- 
    $("#edit_row").click(function() { 

    location_id=parseInt(row_data[2]); //get database id from hidden cell 

    //Ajax Form into Popup 
    $.ajax({ 
     url: 'edit_ndp_schedule.form.php?wnu_ndpID='+location_id, 
     error: function() { alert('failed to load form'); }, 
     success: function(data) { 

      $('#popup_content').html(data); // loads edit form into popup 
      $('#popup').bPopup(); // shows powpup 

      //Events for when the popup form has been submitted 
      $('#edit_member_form').submit(function(evt){ 
      evt.preventDefault(); //prevents form form submitting 

      var formURL = $(this).attr("action"); 
      var postData = $(this).serializeArray(); 
      $.ajax({ 
       url : formURL, 
       type: "POST", 
       data : postData, 
       success:function(data, textStatus, jqXHR) { 

        try { 
         json = $.parseJSON(data); 

         //update selected datatable row to show edits to station 
         row_data[0] = json['date1']; 
         row_data[1] = json['date2']; 
         row.data(row_data); 
         table.order(); 
         //REFRESH ORDER OF COLUMNS HERE 

        } catch (e) { //if returned data isnt json, then its probably and error message 
         alert(data); 
        } 

        $("#popup").bPopup().close(); //close popup 

       }, 
       error: function(jqXHR, textStatus, errorThrown) { 
        alert('fail'); 
       } 

      });//close ajax form send 
      })//close ajax form open success 
     } 
    });//close ajax form open 
    }); //end click edit button 
}); // end document ready 

Answer 1

T.Shahが答え要するに

に私を指摘し、上記のコードの1行が変更されました：

はここ

<button id="edit_row" class="btn btn-warning" style="display:none;">EDIT</button> 
<table id="tabledata" class="display" width="100%"> 
    <thead> 
     <tr> 
     <th>day of year</th> 
     <th>date</th> 
     <th>id</th> 
     <th>poem</th> 
     <th>poet</th>      
     </tr> 
    </thead> 
    <tbody> 
    <?php 
    while ($row = $stmt->fetch(PDO::FETCH_OBJ)){ 
    ?> 
     <tr> 
     <td><?= $row->dayofyear?></td> 
     <td><?= $row->nicedate?></td> 
     <td><?= $row->ndp_id?></td> 
     <td><?= $row->pm_name?></td> 
     <td><?= $row->poet?></td> 
     </tr> 
    <?php } ?> 
</table> 

はここに私のjavascriptのです私のHTMLです。これに

table.order(); 

：この フォーム

row.invalidate().draw(); 

キャッシュからではなく、テーブルに何からのDataTableの注文以来は、編集されたテーブルから順番をリフレッシュすることはできません。変更された行は無効invalidate()とマークされている必要があります（Datatableはその行をキャッシュで更新する必要があることを知っています）ので、テーブルを再描画する必要がありますdraw()。 魅力のように動作します