<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../media/css/demo_page.css"/>
<link rel="stylesheet" href="../media/css/jquery.dataTables_themeroller.css"/>
<link rel="stylesheet" href="../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css"/>
<script src="jquery.js"></script>
<script src="jquery.dataTables.js"></script>
<script src="../jquery/dataTables.editor.js"></script>
</head>
<body>
<script>
$(document).ready(function (){
$("#example").dataTable({
"sAjaxSource":"emp.json",
"display":"envelope",
// "aoColumns":[null,null,
// {
// "mData":null,
// "sDefaultContent":"Edit"
// }],
"aoColumnDefs":[{
"mDataProp":null,
"sTitle":"Edit",
"aTargets":[-1]
}],
//
"aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"]], //define pagination dropdown
"iDisplayLength": 10, //define initial size of the pagination
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<div id="dt_example">
<div id="container">
<table id="example">
<thead>
<tr>
<th>FullName</th>
<th>Address:</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
//emp.json
{
"aaData":[
{"name":"aarati","address":"chabhil"},
{"name":"bebina","address":"maharajgunj"}
]
}
I cannot get the matter here with aoColumnDef and aoColumns..
If I use aoColumns the table appears to be right but not being able to extract data from json file.
with aoColumnDef though the data is not extracted from Json but the address (td) is removed instead Edit is seen there and the above mentioned problem appears... I am totally confused and lost my huge time.
<html>
<head>
<title></title>
<link rel="stylesheet" href="../media/css/demo_page.css"/>
<link rel="stylesheet" href="../media/css/jquery.dataTables_themeroller.css"/>
<link rel="stylesheet" href="../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css"/>
<script src="jquery.js"></script>
<script src="jquery.dataTables.js"></script>
<script src="../jquery/dataTables.editor.js"></script>
</head>
<body>
<script>
$(document).ready(function (){
$("#example").dataTable({
"sAjaxSource":"emp.json",
"display":"envelope",
// "aoColumns":[null,null,
// {
// "mData":null,
// "sDefaultContent":"Edit"
// }],
"aoColumnDefs":[{
"mDataProp":null,
"sTitle":"Edit",
"aTargets":[-1]
}],
//
"aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"]], //define pagination dropdown
"iDisplayLength": 10, //define initial size of the pagination
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<div id="dt_example">
<div id="container">
<table id="example">
<thead>
<tr>
<th>FullName</th>
<th>Address:</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
//emp.json
{
"aaData":[
{"name":"aarati","address":"chabhil"},
{"name":"bebina","address":"maharajgunj"}
]
}
I cannot get the matter here with aoColumnDef and aoColumns..
If I use aoColumns the table appears to be right but not being able to extract data from json file.
with aoColumnDef though the data is not extracted from Json but the address (td) is removed instead Edit is seen there and the above mentioned problem appears... I am totally confused and lost my huge time.