Menu
Does anybody please know, what is wrong with the very simple HTML file below?
I am just trying to use an array of objects as the data source for DataTables:
tests.html:
<html> <head> <link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"> <link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/css/jquery.dataTables_themeroller.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.min.js"></script> <script type="text/javascript"> var data = [ {"Name":"UpdateBootProfile","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]}, {"Name":"NRB Boot","Result":"PASS","ExecutionTime":"00:00:50.5000000","Measurement":[{"TestName":"TOTAL_TURN_ON_TIME","Result":"PASS","Value":"50.5","LowerLimit":"NaN","UpperLimit":"NaN","ComparisonType":"nctLOG","Units":"SECONDS"}]}, {"Name":"NvMgrCommit","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]}, {"Name":"SyncNvToEFS","Result":"PASS","ExecutionTime":"00:00:01.2500000","Measurement":[]} ]; $(function() { var testsTable = $('#tests').dataTable({ bJQueryUI: true, aaData: data, aoColumns: [ { mData: 'Name' }, { mData: 'Result' }, { mData: 'ExecutionTime' } ] }); }); </script> </head> <body> <table id="tests"> <thead> <tr> <th>Name</th> <th>Result</th> <th>ExecutionTime</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> UPDATE: Ok, I've got the answer from the author to use a newer version of DataTables or rename mData to mDataProp
256
For null or undefined value error, Just add this line to attributes : ,columnDefs: [ { "defaultContent": "-", "targets": "_all" } ]
Example :
oTable = $("#bigtable").dataTable({ columnDefs: [{ "defaultContent": "-", "targets": "_all" }] });The alert box will not show again, any empty values will be replaced with what you specified.
78
You're using an array of objects. Can you use a two dimensional array instead?
http://www.datatables.net/examples/data_sources/js_array.html
See this jsfiddle: http://jsfiddle.net/QhYse/
I used an array like this and it worked fine:
var data = [ ["UpdateBootProfile","PASS","00:00:00",[]] , ["NRB Boot","PASS","00:00:50.5000000",[{"TestName":"TOTAL_TURN_ON_TIME","Result":"PASS","Value":"50.5","LowerLimit":"NaN","UpperLimit":"NaN","ComparisonType":"nctLOG","Units":"SECONDS"}]] , ["NvMgrCommit","PASS","00:00:00",[]] , ["SyncNvToEFS","PASS","00:00:01.2500000",[]] ]; Edit to include array of objects
There's a possible solution from this question: jQuery DataTables fnrender with objects
This jsfiddle http://jsfiddle.net/j2C7j/ uses an array of objects. To not get the error I had to pad it with 3 blank values - less than optimal, I know. You may find a better way with fnRender, please post if you do.
var data = [ ["","","", {"Name":"UpdateBootProfile","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]} ] ]; $(function() { var testsTable = $('#tests').dataTable({ bJQueryUI: true, aaData: data, aoColumns: [ { mData: 'Name', "fnRender": function( oObj ) { return oObj.aData[3].Name}}, { mData: 'Result' ,"fnRender": function( oObj ) { return oObj.aData[3].Result }}, { mData: 'ExecutionTime',"fnRender": function( oObj ) { return oObj.aData[3].ExecutionTime } } ] }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
