DataTables with AJAX

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jq-2.1.4,dt-1.10.10,cr-1.3.0/datatables.min.css">
<script src="https://cdn.datatables.net/s/bs-3.3.5/jq-2.1.4,dt-1.10.10,cr-1.3.0/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<table id="tbl" class="dataTable table">
    <thead>
        <tr>
            <th>Digits</th>
            <th>Words</th>
            <th>Numbers</th>
        </tr>
    </thead>
  <tbody>
  </tbody>
</table>

<a id="anch" href="#" > ajax.reload </a>

JavaScript

$(document).ready(function () {
    //emulate ajax
    $.mockjax({
      url: '/test/0',
      responseTime: 200,
      responseText: {
      	"data": [
        	{
            'digit': 1,
            'word': 'abc',
            'number': '123'
        	},
          {
            'digit': 2,
            'word': 'def',
            'number': '345'
        	},
          {
            'digit': 3,
            'word': 'gdhfd',
            'number': '657'
        	},
          {
            'digit': 4,
            'word': 'qer',
            'number': '8454'
        	},
      ]}
    });
    
    table = $('#tbl').dataTable({
        searching: false,
        paging: false,
        info: false,
        "ajax": "/test/0",
        
        "columns": [
            { "data": "digit" },
            { "data": "word" },
            { "data": "number" },

        ]
    });
    /* var colReorder = new $.fn.dataTable.ColReorder(table);
        var rowReorder = new $.fn.dataTable.RowReorder(table); */
    
    /* $("#anch").on('click', function(){
        table.api().ajax.reload(null, false);
    }); */

})