DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="example"></table>

JavaScript

var table = $('#example').DataTable({
  ajax: {
    url : 'https://api.myjson.com/bins/avxod'
  },
  columnDefs: [
     { targets: 0,
       data: 'name'
     },
     { targets: 1,
       data: 'position',
       render: function(data, type, row, meta) {
         if (!meta.settings.aoColumns[meta.col]._processed) {
           meta.settings.aoColumns[meta.col]._processed = []
         }  
         var processed = meta.settings.aoColumns[meta.col]._processed 
         if (type == 'display') {
           if (!processed[meta.row]) {
             processed[meta.row] = 'waiting ...'+meta.row
             $.ajax({
               url : 'https://api.myjson.com/bins/avxod'
             }).done(function(response) {
               var fakeVal = 'Ok, done '+meta.row
               processed[meta.row] = fakeVal
               $('#example')
                  .DataTable()
                  .cell({ row: meta.row, column: meta.col})
                  .data( fakeVal )
                  .invalidate()
             })
             return processed[meta.row]
           } else {
             return processed[meta.row]
           }
         } else {
           return processed[meta.row]
         }   
       }
     }    
   ]
})