Question

我有一个javascript，它在成功返回更新数据库的ajax调用后更新Datatable行的单元格。一切都很好。现在我想刷新数据的排序，因为数据已经改变，但我无法弄清楚如何做到这一点。

我不知道您是否需要查看我的代码。我想我只需要数据表功能来重新排序列，但我可以在手册中找到它。所以，这是我的代码给你的大师。

这是我的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()。像魅力一样工作

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

1 个答案: