DataTables server-side processing fnCallback is not a function
DataTables server-side processing fnCallback is not a function
annesoh
Posts: 1Questions: 1Answers: 0
Hi,
I'm trying to use the server side processing, which I never did before so I try now with a simple example.
I read many example but I can't figure out how to make it works
My script is
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblData" class="hover">
<thead>
<tr class="gridStyle">
<th>UserId</th>
<th>Name</th>
<th>Address</th>
<th>Age</th>
<th>View Details</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function showDetails() {
alert("showing some details");
}
var table = $('#tblData').DataTable({
Processing: true,
ServerSide: true,
sAjaxSource: "Default.aspx/GetTableData",
fnServerData: function (sSource, fnCallback) {
$.ajax({
dataType: 'json',
contentType: "application/json; charset=utf-8",
type: "POST",
url: sSource,
success: function (msg) {
var json = jQuery.parseJSON(msg.d);
console.log(json)
fnCallback(json);
},
error: function (xhr, textStatus, error) {
if (typeof console == "object") {
console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
}
}
});
},
fnDrawCallback: function () {
$('.image-details').bind("click", showDetails);
}
});
})
</script>`
The json will answer this:
{
"sEcho": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"iTotalRecords": 3,
"iTotalDisplayRecords": 3,
"aaData": [
["1", "John Smith", "1 Newton Square, London", "25", "<img class='image-details' src='content/details_open.png' runat='server' height='16' width='16' alt='View Details'/>"],
["2", "Erica Keir", "5 George Road, Manchester", "31", "<img class='image-details' src='content/details_open.png' runat='server' height='16' width='16' alt='View Details'/>"],
["3", "Test McDermont", "32 Queen Mary St, Newcastle", "12", "<img class='image-details' src='content/details_open.png' runat='server' height='16' width='16' alt='View Details'/>"]
]
}
But I get the error: Uncaught TypeError: fnCallback is not a function and my table is always empty.
is there anything I did wrong?
How should I use fnCallback?
Thanks!