Código javascript: (Bibliotecas usadas: Jquery e Databales)
<script type="text/javascript">

var table = $('<table><thead><tr><th>CNPJ</th><th>RAZAO</th><th>EMPENHO ANULADO</th><th>EMPENHO LIQUIDO</th><th>LIQUIDADO</th><th>LIQUIDADO RESTOS</th><th>PAGO EXERCICIO</th><th>PAGO RESTOS</th><th>TOTAL EMPENHADO</th></tr></thead><tbody></tbody></table>');

$.ajax({

url: 'https://gatewayapi.prodam.sp.gov.br:443/financas/orcamento/sof/v2.1/consultarDespesasCredor?anoExercicio=2017&mesEmpenho=03&numPagina=05',

dataType: "json",

headers: { "Authorization": "Bearer 16209823523f9b0b4fc4fed447dc981" },

success: function (r) {

var dados = r.lstCredores;

$(dados).each(function () {

$('<tr><td>' + this.numCpfCnpj + '</td><td>' + this.txtRazaoSocial + '</td><td>' + this.valAnuladoEmpenho + '</td><td>' + this.valEmpenhadoLiquido + '</td><td>' + this.valLiquidado + '</td><td>' + this.valLiquidadoRestos + '</td><td>' + this.valPagoExercicio + '</td><td>' + this.valPagoRestos + '</td><td>' + this.valTotalEmpenhado + '</td></tr>').appendTo(table.find('tbody'));

});

table.appendTo('body').DataTable();

}
})
</script>
 

 

Imagem gerada:

 

.