datatables empty
HTML
<script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<ul>
<li><a href="#" id="currentTasks">"current"</a></li>
<li><a href="#" id="archiveTasks">"archive"</a></li>
</ul>
<table id="baseTasks">
<thead>
<tr>
<th class="now-task">name</th>
<th class="now-curat">schoolClass</th>
<th class="now-class">complexity</th>
<th class="now-compl">author</th>
</tr>
</thead>
</table>
JavaScript
var tasks = [];
function getTask(url){
//in reality, ajax request here
if(url == 1)
tasks = [];
else
tasks = [{name:"task1", schoolClass:"1", complexity:"1", author:"Smith"},
{name:"task2", schoolClass:"2", complexity:"2", author:"Jons"}]
}
getTask(2);
var searchTable = $('#baseTasks').dataTable({
bFilter: false, bInfo: false, "bLengthChange": false,
scrollY:"600px",scrollCollapse: true, paging:false,
"aaData": tasks,
"aoColumns": [
{ "mData": "name"
},{"mData": "schoolClass"
},{"mData": "complexity"
},{"mData": "author"
}]
});
$('#archiveTasks').click(function () {
searchTable.fnClearTable();
getTask(1);
searchTable.fnAddData(tasks);
});
$('#currentTasks').click(function () {
searchTable.fnClearTable();
getTask(2);
searchTable.fnAddData(tasks);
});