Populate datatable with data from JS object

Question

I am trying to populate the datatable with data I get from a JS object but I don't quite get how to do it or what am I doing wrong.. tried few suggestions but none of them gets the result.

Can any one take a look at this JS-fiddle and offer some insight or solution.

http://jsfiddle.net/hbpjsjx0/

var datas =
    {"5":{"id_operator":"5","id_city":"1","operator_code":"HAL","operator_name":"Hallo","operator_balance":"2.00","operator_address":"Adresa","operator_provision":"5.2000","operator_active":"1","operator_balance_sum_id":"0"},"2":{"id_operator":"2","id_city":"2","operator_code":"HPY","operator_name":"Happy (BH Telecom dd)","operator_balance":"115.00","operator_address":"Obala Kulina bana br. 8","operator_provision":"7.0000","operator_active":"1","operator_balance_sum_id":"4"},"1":{"id_operator":"1","id_city":"1","operator_code":"ERO","operator_name":"HT Eronet","operator_balance":"1046104.00","operator_address":"Ulica Kneza Branimira bb","operator_provision":"6.0000","operator_active":"1","operator_balance_sum_id":"0"},"6":{"id_operator":"6","id_city":"1","operator_code":"IZI","operator_name":"izi mobil","operator_balance":"95.00","operator_address":"Adresa","operator_provision":"6.0000","operator_active":"1","operator_balance_sum_id":"0"},"3":{"id_operator":"3","id_city":"4","operator_code":"MTL","operator_name":"M:tel","operator_balance":"84982.50","operator_address":"Vuka Karad\u017ei\u0107a br. 6","operator_provision":"6.5000","operator_active":"1","operator_balance_sum_id":"0"},"4":{"id_operator":"4","id_city":"1","operator_code":"ULT","operator_name":"Ultra( BH Telecom dd)","operator_balance":"398.00","operator_address":"Adresa","operator_provision":"6.5000","operator_active":"1","operator_balance_sum_id":"2"}};


var data_obj = {};
var data = [];
$.each(datas, function(key, val) {
    var link = '<a href="operators/operator_provision/'+val.id_operator+'">'+val.operator_name+'</a>';
    data.push( {link : link, 
                     balance: val.operator_balance,
                     provision: val.operator_provision
                    });


});
data_obj = {data: data};
console.log(data_obj);

$(document).ready(function() {
    $('#example').dataTable({      
        "aaData" : data_obj,
        "aoColumns": [
            { "data": "link" },
            { "data": "balance" },
            { "data": "provision" }            
        ]
    });
});



<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
 </head>
 <body>
    <div class="container">

        <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
            <thead>
                <tr>
                    <th>Naziv</th>
                    <th>Balans</th>
                    <th>Provizija</th>           
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

     </div>
</body>

Thank you

user3118321 · Accepted Answer · 2014-08-12 14:39:32Z

3

Try changing the following:

data_obj = data; //not {data: data}

and

"aoColumns": [
        { "mDataProp": "link" },
        { "mDataProp": "balance" },
        { "mDataProp": "provision" }            
] //data changes to mDataProp

That should work.

answered Aug 12, 2014 at 14:39

user3118321

Sign up to request clarification or add additional context in comments.

2 Comments

Richlewis Over a year ago

i was trying to get it working, beat me to it, I can confirm that your answer works, nice one :-)

user3118321 Over a year ago

Took me quite a while :)

Collectives™ on Stack Overflow

Populate datatable with data from JS object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related