jquery datatables not sorting after updating value in row with x-editable

Question

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.

When the table loads initially, the x-editable is applied to all the target columns in the rows correctly.

<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" >3</a>

Then the table is drawn and paging applied.

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.

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.

Here is my 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": "<'dt-toolbar'<'col-xs-12 col-sm-6'fi><'col-sm-6 col-xs-6 hidden-xs'plT>r>" + 't<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>><"clear">"',
    });
});

Here is an example of what the column that is sorting the order has:

<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">30</a>

Here is what the updated column value:

<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);">1</a>

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:

table.order([1, 'desc']).draw(),

it sorts descending, but the sorting is still incorrect.

Answer 1

SOLUTION

Add data-order attribute to each editable cell td as shown below:

<td data-order="30">
    <a href="#" ...>30</a>
</td>

Then you need to handle hidden event, update data-order attribute used by jQuery DataTables for sorting and use row().invalidate() to tell DataTables that row content has been changed.

Use the code below:

var table = $('#sort1').DataTable({
   drawCallback: function(){
      var api = this.api(); 

      $('.editable', api.table().body())
         .editable()
         .off('hidden')
         .on('hidden', function(e, reason) {
            if(reason === 'save') {
               $(this).closest('td').attr('data-order', $(this).text());
               table.row($(this).closest('tr')).invalidate().draw(false);
            }
         });
   },
   // ... skipped ...
});

DEMO

See this jsFiddle for code and demonstration.

NOTES

• It would be preferable to use cell().invalidate() instead of row().invalidate() but there is an issue in the current release that has only been fixed in nightly version.

• You need to put your X-editable initialization code in drawCalback callback function