CakePHP Bootstrap-tables trouble

Question

I'm with some troubles with the CakePHP serialize and bootstrap-tables. I've loaded all .js. I think the bootstrap-tables dont reconize the { "despesas":[ in front of the .json Can someone help me?

My route.php

//code    
Router::extensions(['json']);
//code

my DespesasController.php function

//code
       public function test()
    {
        $this->paginate = [
            'contain' => ['Lojas', 'DespesaTipos'],
            'limit' => '1000000000'
        ];
        $this->set('despesas', $this->paginate($this->Despesas));
        $this->set('_serialize', ['despesas']);
    } 
//code

test.ctp

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css">



<table id="table"></table>

<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pt-BR.min.js"></script>
<script type="text/javascript">
  $('#table').bootstrapTable({
    url: 'test.json',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'descricao',
        title: 'Item Name'
    }, {
        field: 'valor',
        title: 'Item Price'
    }, ]
});
</script>

test.json

{
    "despesas": [
        {
            "id": 1,
            "data": "2015-01-02T00:00:00-0200",
            "descricao": "INTERNET TRIBUNA BAIRROS (50%)",
            "valor": 1503,
            "loja_id": 1,
            "despesa_tipo_id": 1,
            "obs": "",
            "created": "2015-12-10T00:00:00-0200",
            "modified": "2015-08-05T00:00:00-0300",
            "criado_por": "Kelvin Primo",
            "modificado_por": "Deise"
        },

When I open it on browser it returns.

No matching records found

Answer 1

Load you json data before you create the table, then you can pass it into the table, how it likes it.

<script type="text/javascript">    
$(function () {
  $.getJSON( "test.json", function(data) {
    $('#table').bootstrapTable({
      data: data.despesas,
      columns: [{
        field: 'id',
        title: 'Item ID'
      }, {
        field: 'descricao',
        title: 'Item Name'
      }, {
        field: 'valor',
        title: 'Item Price'
      }]
    });
  });
});
</script>