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.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.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;
}

.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: #fff9b0;
}

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

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

table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
  background-color: #fff9c0;
}

table.dataTable.display tbody tr:hover >...

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...