1

Estou desenvolvendo um sistema que possui uma tabela de clientes, esta tabela não foi desenvolvida por mim, por isto estou tendo alguma problemas para popular.

Visualmente a tabela funciona perfeitamente, mas quando tento popular com registros do banco de dados, eles não aparecem.

Tenho 2 arquivos em comum, index.php (Possui a Table e oo Script que recebe os dados via Json) e getClientes(Possui a query selecionando os registros no banco e enviando no formato Json).

index.php

<table id="grid" class="table table-condensed table-hover table-striped" data-selection="true" data-multi-select="false" data-row-select="true" data-keep-selection="true">
    <thead>
        <tr>
            <th data-column-id="codigo" data-order="asc" data-align="left" data-header-align="left">Código</th>
            <th data-column-id="razao" data-order="asc" data-align="left" data-header-align="left">Razão Social</th>
            <th data-column-id="bairro" data-order="asc" data-align="left" data-header-align="left">Bairro</th>
            <th data-column-id="cidade" data-order="asc" data-align="left" data-header-align="left">Cidade</th>
            <th data-column-id="status" data-formatter="link" data-sortable="false">Status</th>
            <th data-column-id="acao" data-formatter="link" data-sortable="false"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<script src="js/grid/jquery.bootgrid.js"></script>
<script>
    $(function() {

        $("#grid-data").bootgrid({
            ajax: true,
            url: "class/getClientes.php",
            dataType: "json",
            formatters: {
                "link": function(column, row) {
                    return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
                }
            }
        });

    });
</script>

getClientes.php

$query = mysql_query('SELECT codigo, nome, bairro, cidade  FROM clientes');
$result = mysql_fetch_array($query);
$arr = array();
if(mysql_num_rows($query) > 0) {
    while($row = mysql_fetch_assoc($query)) {
        $arr[] = $row;  
    } 
}
$json_response = json_encode($arr);
echo $json_response;

Meu arquivo getClientes.php está gerando este resultado.

inserir a descrição da imagem aqui

Não estou conseguindo manusear o scrtip dentro de index.php de forma que ele receba as informações no formato JSON e insira as linhas na tabela com as informações.

Poderiam me ajudar?

4
  • Pode fazer um jsFiddle com esse JSON numa variável e com o seu HTML e plugin carregados? Assim podemos testar. Já deu uma olhada à documentação jquery-bootgrid.com/Documentation#formatters ?
    – Sergio
    Commented 15/10/2014 às 20:06
  • Já verifiquei à documentação Sergio, mas mesmo assim não consegui o resultado desejado. Commented 15/10/2014 às 20:36
  • Seria possivel fazer um jsFiddle?
    – Sergio
    Commented 15/10/2014 às 20:37
  • Sergio, segue: jsfiddle.net/jan8g6eg acredito que esteja da forma correta. Commented 15/10/2014 às 20:44

1 Resposta 1

1

Não consegui usar a API como a documentação indica mas pela documentação vejo que o objeto JSON deve ter a seguinte estrutura:

{
  "current": 1,
  "rowCount": 10,
  "rows": [ // ========================= aqui sim entra o seu JSON que está na imagem
    {
      "id": 19,
      "sender": "[email protected]",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "[email protected]",
      "received": "2014-05-30T20:15:00"
    },
    ...
  ],
  "total": 1123
}

E aí parece-me que o seu objeto precisa de algum trabalho. Pelo menos adicionando a propriedade "rows":

if(mysql_num_rows($query) > 0) {
    while($row = mysql_fetch_assoc($query)) {
        $arr[] = $row;  
    } 

    $resp  = array('rows' => $arr);
}
$json_response = json_encode($resp);

A maneira que consegui pôr a funcionar para um exemplo no jsFiddle foi assim:

var data = {
    json: JSON.stringify({
        "current": 1,
            "rowCount": 1,
            "rows": [{
            "codigo": "111",
                "razao": "nome razao",
                "bairro": "nome bairro",
                "status": "status",
                "cidade": "capital"
        }],
            "total": 1
    })
}

$.ajax({
    url: "/echo/json/",
    type: "POST",
    data: data,
    success: function (result) {
        $("#grid").bootgrid({
            formatters: {
                "link": function (column, row) {
                    console.log(column, row);
                    return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
                }
            }
        }).bootgrid("append", result.rows);
    }
});

Exemplo: http://jsfiddle.net/fxsgakhp/

6
  • Agradeço pela sua atenção Sergio! Ajudou a entender bastante como funcina o codigo. Mas como faria para meu getClientes.php gerar um JSON neste formato com todos os meus registros var data = { json: JSON.stringify({ "current": 1, "rowCount": 1, "rows": [{ "codigo": "111", "razao": "nome razao", "bairro": "nome bairro", "status": "status", "cidade": "capital" }], "total": 1 }) } ou seja, como gerar neste formato, informando "current", "rows", "total".... Commented 16/10/2014 às 17:33
  • @crishenrique1986 já experimentou o php que eu coloquei. Eu acho que aquilo é o essêncial, o resto é informação para a paginação. Pode juntar mais elementos à array, tipo: $resp = array('rows' => $arr, 'total' => $total_de_linhas);
    – Sergio
    Commented 16/10/2014 às 18:50
  • Sergio, já inseri o código php que me passou, mas a principio, estou utilizando o exemplo que voc~e me passou para ver se funciona. Acontece que quando uso o mesmo script que vc fez, a formatação da tabela some, não aparece o campo de pesquisa, paginação...somente coluna, mas quando vou retirando algumas coisas do script, tentando voltar o mais proximo do original, a tabela volta aparecer de forma correta mas sem os registros. Commented 16/10/2014 às 19:06
  • Eu utilizei o proprio SCRIPT da documentação, alterando apenas a URL $("#grid-data").bootgrid({ ajax: true, post: function () { /* To accumulate custom parameter with the request object */ return { id: "b0df282a-0d67-40e5-8558-c9e93b7befed" }; }, url: "class/getClientes.php", formatters: { "link": function(column, row) { return "<a href=\"#\">" + column.id + ": " + row.id + "</a>"; } } }); Porém, ele não respeita a quantidade de registro que deve possuir em uma paginação.O que pode ser? Commented 16/10/2014 às 20:06
  • @crishenrique1986 eu não conheço bem o plugin e não tenho muito tempo para investigar mais do que coloquei na resposta. Se encontrar a solução seria interessante colocar aqui uma resposta para outros aprenderem. Ideias: o seu HTML tem #grid no id da table, este código que você colocou tem #grid-data. Pelo que eu percebo a qtd de linhas por página é defenida no php, mas posso estar enganado.
    – Sergio
    Commented 16/10/2014 às 20:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .