DataTables with AJAX

by Rodrigo Pan

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<span>Teste</span>
<input type="button" value="Refresh" id="btn">
<br/>
<br/>
<div class="textos">
  <table id="tb_rgc" class="display compact cell-border textos" cellspacing="0" width="100%">
  </table>
</div>

CSS

.textos {
  font-weight: normal;
  font-size: 11px;
  color: black;
  font-family: Arial, Geneva, Verdana, Helvetica, sans-serif;
}

button.dt-button,div.dt-button,a.dt-button{
  padding: 1px;
  font-weight: bold;
  font-size: 11px;
}
button.dt-button-txt,div.dt-button-txt,a.dt-button-txt{
  padding-right: 4px;
}
button.dt-button-txt,div.dt-button-txt,a.dt-button-txt{
  margin-left: 10px;
  margin-right: -5px
}
div.dt-buttons {
  margin-left: 5px;
}
.dt-button.disabled i.mdi {
  cursor: no-drop;
  opacity: 0.26;
  filter: alpha(opacity=26);
}
/*div.dataTables_processing{
  z-index: 1;
}*/
a.paginate_button{
  padding: 1px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding-top: 0.5em;
}

div.dataTables_wrapper span.select-item {
  color: red;
  font-weight: bold;
}

table.dataTable.compact thead th,
table.dataTable.compact thead td {
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: #e13737;
  color: white;
  border-bottom: #000000 solid 1px;
  border-right: #000000 solid 1px;
  border-left: #e8e8e8 solid 1px;
  border-top: #e8e8e8 solid 1px;
}

table.dataTable.compact thead th.dt-checkbox,
table.dataTable.compact thead td.dt-checkbox,
table.dataTable.compact tbody th.dt-checkbox,
table.dataTable.compact tbody td.dt-checkbox {
  padding: 0px 1px;
}

table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
  padding: 1px 3px;
}

table.dataTable tbody tr {
  background-color: #ffffff;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: #ffffdd;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: #ffff80;
}

table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: #fff9f0;
}

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color:...

JavaScript

// AJAX emulation
$.mockjax({
    url: '/test/0',
    responseTime: 2750,
    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" : "11/09/2017", "hr" : "08\/09\/2017 00:05:46", "vl" : 79800 }, { "cd" : 799, "nu" : "04026982", "no" : "Goureth De Jesus Lemos", "fl" : "S", "tp" : "C", "dt" : "12/09/2017", "hr" : "08\/09\/2017 00:00:52", "vl" : 79900 }, { "cd" : 800, "nu" : "00270828", "no" : "Adolfo Caumba", "fl" : "S", "tp" : "C", "dt" : "13/09/2017", "hr" : "08\/09\/2017 00:04:42", "vl" : 80000 }, { "cd" : 801, "nu" : "04026947", "no" : "Meno Ueca Congo Zacarias", "fl" : "S", "tp" : "C", "dt" : "14/09/2017", "hr" : "08\/09\/2017 00:11:27", "vl" : 80100 }, { "cd" : 804, "nu" : "06668667", "no" : "Diavenda Afonso Alberto", "fl" : "N", "tp" : "C", "dt" : "15/09/2017", "hr" : "08\/09\/2017 00:03:52", "vl" : 80400 }, { "cd" : 805, "nu" : "04026976", "no" : "Beatriz Teixeira De Carvalho", "fl" : "S", "tp" : "C", "dt" : "16/09/2017", "hr" : "08\/09\/2017 00:06:11", "vl" : 80500 }, { "cd" : 806, "nu" : "08264307", "no" : "Luvambu Mireille", "fl" : "S", "tp" : "C", "dt" : "17/09/2017", "hr" : "08\/09\/2017 00:01:29", "vl" : 80600 }, { "cd" : 808, "nu" : "08264282", "no" : "Maria De Fatima Felizardo Lopes", "fl" : "N", "tp" : "C", "dt" : "18/09/2017", "hr" : "08\/09\/2017 00:07:01", "vl" : 80800 }, { "cd" : 810, "nu" : "08264342", "no" : "Francisco Antonio Neto", "fl" : "S", "tp" : "C", "dt" : "19/09/2017", "hr" : "08\/09\/2017 00:14:19", "vl" : 81000 }, { "cd" : 811, "nu" : "08264365", "no" : "Rui Arsenio Salvaterra Dos...