Using datatables to display json file data

I tried many solution which are available in stack overflow but any single solution is not useful to me. Here is my code which I am trying still now.

HTML

<table id="example1" class="table table-bordered">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
</table>

Json file data

{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    ....
}

Datatables code

var table;
$(function () {     
    table = $('#example1').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax" : {
                "url" : "../apps/language/fr/fr.json",
                "dataSrc" : function (json) {
                    console.log(json ? json.length : 'json_data is null or undefined');

                    $.each(json, function( index, value ) {
                        
                        //console.log(index + "^_^" + value)
                        var html = "<tr>";
                            html += "<td>" + index + "</td>";
                            html += "<td>" + value + "</td>";
                            html += "<td><a href='javascript:void(0);' class='btn btn-sm btn-primary waves-effect waves-light edit'>EDIT</a></td>";
                            html += "</tr>";
                        var row = $(html);
                        $("#example1 tbody").append(row);
                    });
                }
            }
        });
});

Can you please help me where I am wrong? I need data in table format with pagination. Same like datatables. I already load databables library. I am also getting length error in js while I used this code.



Read more here: https://stackoverflow.com/questions/66385864/using-datatables-to-display-json-file-data

Content Attribution

This content was originally published by Vipul Jethva at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: