Javascript - 编辑行后刷新数据表的列顺序

Question

这个问题已经有答案了:

Refreshing sort cache in Jquery Datatable (1 个回答)

已关闭 5 年前。

我有一个 javascript，它可以在成功返回更新数据库的 ajax 调用后更新数据表行的单元格。一切都好。现在我想刷新数据表的排序，因为数据已更改，但我不知道如何执行此操作。

我不知道你是否需要看我的代码。我想我只需要数据表函数来重新排序列，但我可以在手册中找到它。这是我为各位大师编写的代码。

这是我的 HTML

<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:

$(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 向我指出了答案

总之，上面的代码改了一行。形成这个:

table.order();

对此:

row.invalidate().draw();

由于 Datatables 从缓存中排序，而不是从表中的内容排序，因此无法从已编辑的表中刷新顺序。更改的行必须标记为无效 invalidate() (这样Datatable就会知道缓存中需要更新行)，然后需要重绘表draw() 。工作起来就像一个魅力