DataTables with AJAX

by Rodrigo Pan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<table id="tb_rgc" class="display compact cell-border textos" cellspacing="0" width="100%">
</table>

JavaScript

// AJAX emulation
$.mockjax({
    url: '/test/0',
    responseTime: 250,
    response: function(settings){
        this.responseText = { "data" : [
        { "cd" : 795, "nu" : "100000000098201", "no" : "Antonio Vuata Kukembiko", "fl" : "S", "tp" : "C", "dt" : "09/09/2017", "hr" : "08\/09\/2017 00:02:50", "vl" : 79500 }
        , { "cd" : 797, "nu" : "00271029", "no" : "Daniel Joaquim Correia Fiquissa", "fl" : "S", "tp" : "C", "dt" : "10/09/2017", "hr" : "08\/09\/2017 00:12:27", "vl" : 79700 }
        , { "cd" : 798, "nu" : "00270969", "no" : "Dialunda Bela Emanuel", "fl" : "S", "tp" : "C", "dt" : null, "hr" : null, "vl" : 79800 } ] }
    }
});

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$.extend( true, $.fn.dataTable.defaults, {
   "dom":      "lBftip"
  , rowId:      "cd"
  , "scrollY":         "200px"
  , "scrollCollapse":  true
  , "lengthMenu":      [[10, 100, 500, 1000, -1], [10, 100, 500, 1000, "Todos"]]
  , "pageLength":      1000
  , "processing":      true
  , "deferRender":     true
  , buttons: true
  , select: { style: "multi", selector: "td:first-child"}
  , buttons: [ {extend:"print", exportOptions: { orthogonal: "export"}}]
  , colReorder: true
});


$('#tb_rgc').DataTable({
    "ajax": { url: "/test/0", type: "POST"},
    "columns": [
       { "data": "cd", title: "CD"},
      { "data": "nu", title: "Número" },
      { "data": "no", title: "Nome" },
      { "data": "fl", title: "Ativo" },
      { "data": "tp", title: "Tipo" },
      { "data": "dt", title: "Data" },
      { "data": "hr", title: "Hora" },
      { "data": "vl", title: "Valor" }
    ]
});