1

Eu tenho um arquivo json gigantesco e queria abri-lo em um jquery datatable

fiz um script que popula o arquivo .json em uma tabela do jquery datatable, mas o problema é que não está populando da maneira que gostaria: http://www.scarsphoto.com.br/teste/comparacao.html Além disso, eu estou dando copy/paste e armazenando em uma array de objetos e mandando popular na tabela, desse jeito não está dando certo.

esse é o script:

        var json = [{
                "tempoNS" : 4251649,
                "tempoMS" : 4,
                "tamanhoArray" : 1999,
                "nome" : "Bubble iterativo"
            }, {
                "tempoNS" : 3064749,
                "tempoMS" : 3,
                "tamanhoArray" : 1999,
                "nome" : "Bubble recursivo"
            }, {
                "tempoNS" : 994920,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Insertion iterativo"
            }, {
                "tempoNS" : 908287,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Insertion recursivo"
            }, {
                "tempoNS" : 1500831,
                "tempoMS" : 1,
                "tamanhoArray" : 1999,
                "nome" : "Selection iterativo"
            }, {
                "tempoNS" : 1461891,
                "tempoMS" : 1,
                "tamanhoArray" : 1999,
                "nome" : "Selection recursivo"
            }, {
                "tempoNS" : 176888,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Merge iterativo"
            }, {
                "tempoNS" : 187754,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Merge recursivo"
            }, {
                "tempoNS" : 105348,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Quick recursivo"
            }, {
                "tempoNS" : 160588,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Heap recursivo"
            }, {
                "tempoNS" : 100217,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "CombSort Sem Otimização"
            }
        ];
        var tamanhoJson = json.length;
        var results = "";

        for (var i = 0; i < tamanhoJson; i++) {
            results += "<tr>";
            results += "<td>" + json[i].tamanhoArray + " Elementos</td>";
            results += "<td>" + json[i].nome + " </td>";
            results += "<td>" + json[i].tempoNS + " ns</td>";
            results += "<td>" + json[i].tempoMS + " ms</td>";
            results += "</tr>";
        } 

        results += "<br />";
        var div = document.getElementById("example");
        console.log(results);
        div.innerHTML = results;    

se eu faço com os dados já populados no html, funciona: http://scarsphoto.com.br/teste/comparacao-com-dados-ja-populados-no-html

esse é arquivo .json que gostaria de popular no datatable jquery: http://www.scarsphoto.com.br/teste/teste.json

estou seguindo este exemplo: https://www.datatables.net/manual/styling/bootstrap-simple.html

qual a melhor maneira de se fazer, é via ajax? desconheço tal procedimento, poderiam me falar como eu faço?

1
  • Seu Json está todo como objeto está correto isto? Faltou um [ no começo e outro no fim para você conseguir convertê-lo em uma lista de objetos.
    – Marconi
    4/05/2015 às 12:51

1 Resposta 1

2

Você pode usar o $.getJSON do jquery para obter os dados.

 var url = "http://www.scarsphoto.com.br/teste/teste.json";
            $.getJSON(url, function (data) {
                popularDataTables(data.d);
  });

XMLHttpRequest cannot load http://www.scarsphoto.com.br/teste/teste.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:28026' is therefore not allowed access.

Mais tem me gerado o seguinte erro que pode ser resolvido Aqui.

Você não precisa percorrer todo o array para preencher a tabela, Veja que no final usei o ID da tabela colocando seu array na propriedade aaData do Jquery Datables, definindo quais seriam as colunas do corpo da tabela.

Coloque o código dentro de uma função e passe os dados por parametro.

function popularDataTables(json){
    $('#example').DataTable({
                    "aaData": json,
                    "aoColumns": [
                        { "mDataProp": "tempoNS" },
                        { "mDataProp": "tempoMS" },
                        { "mDataProp": "tamanhoArray" },
                         { "mDataProp": "nome" }
                    ],
                });
}

Segue um exemplo que possa te ajudar.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet">
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>tempoNS</th>
                        <th>tempoMS</th>
                        <th>tamanhoArray</th>
                        <th>nome</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var json = [{
                "tempoNS": 4251649,
                "tempoMS": 4,
                "tamanhoArray": 1999,
                "nome": "Bubble iterativo"
            }, {
                "tempoNS": 3064749,
                "tempoMS": 3,
                "tamanhoArray": 1999,
                "nome": "Bubble recursivo"
            }, {
                "tempoNS": 994920,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Insertion iterativo"
            }, {
                "tempoNS": 908287,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Insertion recursivo"
            }, {
                "tempoNS": 1500831,
                "tempoMS": 1,
                "tamanhoArray": 1999,
                "nome": "Selection iterativo"
            }, {
                "tempoNS": 1461891,
                "tempoMS": 1,
                "tamanhoArray": 1999,
                "nome": "Selection recursivo"
            }, {
                "tempoNS": 176888,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Merge iterativo"
            }, {
                "tempoNS": 187754,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Merge recursivo"
            }, {
                "tempoNS": 105348,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Quick recursivo"
            }, {
                "tempoNS": 160588,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Heap recursivo"
            }, {
                "tempoNS": 100217,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "CombSort Sem Otimização"
            }
            ];
            $('#example').DataTable({
                "aaData": json,
                "aoColumns": [
                    { "mDataProp": "tempoNS" },
                    { "mDataProp": "tempoMS" },
                    { "mDataProp": "tamanhoArray" },
                     { "mDataProp": "nome" }
                ],
            });
        });

    </script>
</body>
</html>

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 .