title: Javascript - Refresh column order of Datatables after edit to rows
body: <p>I have a javascript that updates the cells of a Datatable row after a successfully returned ajax call which updates the database. All's good. Now I want to refresh the sorting of the Datatable since the data has changed but I cannot figure out how to do this.</p>
  
  <p>I don't know if you need to see my code. I'm thinking I just need the datatable function to reorder a column, but I can find it in the manuals. So here's my code for you gurus.</p>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;button id="edit_row" class="btn btn-warning" style="display:none;"&gt;EDIT&lt;/button&gt;
  &lt;table id="tabledata" class="display" width="100%"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;day of year&lt;/th&gt;
          &lt;th&gt;date&lt;/th&gt;
          &lt;th&gt;id&lt;/th&gt;
          &lt;th&gt;poem&lt;/th&gt;
          &lt;th&gt;poet&lt;/th&gt;                    
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;?php
      while ($row = $stmt-&gt;fetch(PDO::FETCH_OBJ)){
      ?&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;?= $row-&gt;dayofyear?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?= $row-&gt;nicedate?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?= $row-&gt;ndp_id?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?= $row-&gt;pm_name?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?= $row-&gt;poet?&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;?php } ?&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here's my javascript:</p>
  
  <pre><code>$(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 &amp; 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
  </code></pre>