DataTables - X-editable

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td data-order="61"><a href="javascript:;" class="editable" data-type="text" data-pk="1" data-url="" data-mode="popup" data-title="Age:">61</a></td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td data-order="49"><a href="javascript:;" class="editable" data-type="text" data-pk="1" data-url="" data-mode="popup" data-title="Age:">49</a></td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td...

JavaScript

$(document).ready(function() {      
    var table = $('#example').DataTable({
       order: [[ 3, 'asc' ]],
       drawCallback: function(settings){
          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);
                }
             });           
       }
    });    
    
} );