title: jquery datatables not sorting after updating value in row with x-editable
body: <p>I'm using Datatables v 1.10.9 with x-editable v1.5.1
  I have a number of rows with a column with an order value that is an integer.</p>
  
  <p>When the table loads initially, the x-editable is applied to all the target columns in the rows correctly.</p>
  
  <pre><code>&lt;a href="#" class="Order editable editable-click" data-type="text" data-mode="inline" data-pk="1100" data-url="/Service/UpdateOrder" data-title="Update Order" data-inputclass="xeditable-number" &gt;3&lt;/a&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7zXds.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7zXds.png" alt="Original"></a></p>
  
  <p>Then the table is drawn and paging applied.</p>
  
  <p>So all is good up to this point.
  When I edit an order value with x-editable it saves correctly to the server side and calls the success callback.</p>
  
  <p><a href="https://i.stack.imgur.com/2Gqd2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Gqd2.png" alt="Being updated"></a></p>
  
  <p>However, despite me calling the datatables draw() again in that success callback or manually sorting by clicking the column header, it won't sort correctly, with the ordering being as it was before the column value was updated.</p>
  
  <p><a href="https://i.stack.imgur.com/MePAg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MePAg.png" alt="final"></a></p>
  
  <p>Here is my code.</p>
  
  <pre><code>$(document).ready(function () {
  
      //X-editable for order
      $('.Order').editable({
          error: function (response) {
              alert('error');
          },
          success: function (data, config) {
              alert('success');
              table.order([1, 'asc']).draw();
          },
      });
  
      var table = $('#sort1').DataTable({
          stateSave: true,
          filter: false,
          "pageLength": 25,
          "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
          "columnDefs": [
              {
                  "type": "html",
                  "targets": ['no-sort'],
                  "orderable": false,
              },
              {
                  "type": "html",
                  "target": [1, 3, 4, 6]
              },
          ],
          "autoWidth": false,
          "dom": "&lt;'dt-toolbar'&lt;'col-xs-12 col-sm-6'fi&gt;&lt;'col-sm-6 col-xs-6 hidden-xs'plT&gt;r&gt;" + 't&lt;"dt-toolbar-footer"&lt;"col-sm-6 col-xs-12 hidden-xs"i&gt;&lt;"col-xs-12 col-sm-6"p&gt;&gt;&lt;"clear"&gt;"',
      });
  });
  </code></pre>
  
  <p>Here is an example of what the column that is sorting the order has:</p>
  
  <pre><code>&lt;a href="#" class="Order editable editable-click" data-type="text" data-mode="inline" data-pk="1093" data-url="/Service/UpdateOrder" data-title="Update Order" data-inputclass="xeditable-number"&gt;30&lt;/a&gt;
  </code></pre>
  
  <p>Here is what the updated column value:</p>
  
  <pre><code>&lt;a href="#" class="Order editable editable-click" data-type="text" data-mode="inline" data-pk="1094" data-url="/Service/UpdateOrder" data-title="Update Order" data-inputclass="xeditable-number" style="display: inline-block; background-color: rgba(0, 0, 0, 0);"&gt;1&lt;/a&gt;
  </code></pre>
  
  <p>However, the table won't be ordered correctly, with it being sorted by the original value still.
  The resorting is happening; if I set it to sort desc: </p>
  
  <pre><code>table.order([1, 'desc']).draw(),
  </code></pre>
  
  <p>it sorts descending, but the sorting is still incorrect.</p>