i want to include my JSON list into table of datatables plugin, i have the code, but something is not working;/ maybe you will help :] I have the code which displays theader and build a table - it works fine ,the rows are creating but not in the main table, just like the scripts are working in they own way or something ;/ version of datatables 1.9.4
HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" title="currentStyle">
@import "css/table.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery.fn.dataTableExt.oSort['numeric-comma-asc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
var y = (b == "-") ? 0 : b.replace( /,/, "." );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
var y = (b == "-") ? 0 : b.replace( /,/, "." );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
{ "sType": "numeric-comma" },
null
]
} );
} );
var myList = [
{id: "1", mias: "Łódz", pokoi: "2", pow: "45.0", cena: "130000", data: "2001-01-02"},
{id: "2", mias: "Łódz", pokoi: "3", pow: "55.0", cena: "150000", data: "2001-01-12"},
{id: "3", mias: "Łódz", pokoi: "4", pow: "75.0", cena: "190000", data: "2001-01-20"},
{id: "4", mias: "Łódz", pokoi: "1", pow: "25.0", cena: "100000", data: "2001-01-28"}
];
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#example").append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#example").append(headerTr$);
return columnSet;
}
</script>
</head>
<body onLoad="buildHtmlTable()" >
<table cellpadding="0" cellspacing="0" border="1" class="display" id="example" >
</table>
</body>
</html>