how to open a json file and popular in a jquery datatable?

Navigation
0

I have a gigantic json file and wanted to open it in a jquery datatable

I made a script that populates the .json file into a jquery datatable table, but the problem is that it is not populating the way you would like it to be: link Also, I'm giving copy / paste and storing in an array of objects and sending them popular in the table, that way it's not working.

This is the 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;

If I do with data already populated in html, it works: link

This is the .json file that I would like to be able to populate the jquery datatable: link

I'm following this example: link

What is the best way to do it, via ajax? I do not know this procedure, could you tell me how I do it?

    
asked by anonymous 03.05.2015 / 00:06

1 answer

1

You can use $.getJSON of jquery to get the data. 

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

XMLHttpRequest can not load    link . At the   'Access-Control-Allow-Origin' header is present on the requested   resource. Origin ' link ' is therefore not allowed   access.

More has generated me the following error that can be resolved Here .

You do not have to go through the entire array to fill the table, see that in the end I used ID of the table by putting its array in the aaData property of Jquery Datables, defining what would be the columns of the table body. p>

Put the code inside a function and pass the data by parameter. 

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

Here is an example that might help you. 

<!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>
    
03.05.2015 / 05:01
How to configure the test permission in AndroidManifest? Run Application in 2nd Plane Cordova