AJAX with Webmethod: Code in dataSrc: does not appear to fire
AJAX with Webmethod: Code in dataSrc: does not appear to fire
lyleja
Posts: 7Questions: 3Answers: 0
Hello,
I have been trying to get data from and MS SQL database into a DataTables table via AJAX.
The server side code is c#
In the example given I make two calls to the server's Webmethod the first is raw AJAX which comes back and displays in simple Div, no problem. The second call is the DataTables invoked call, which does return; the success function runs - so I can see the data is there. But it does not populate the DataTable itself, I just see the "Loading ..." message.
I am trying to use the dataSrc function to point the DataTable to the actual data returned in the server response:
dataSrc: function (response) {
var myobj = JSON.parse(response.d);
alert("This is NOT shown!!"); // This code does not run.
return myobj.data;
},
But this code does not seem to run. Any idea why?
Please see the full test file below. Any help would be greatly appreciated.
Example code follows...
<!DOCTYPE html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Web.Services" %>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Datatables with WEB Method</title>
<!-- Sever Side scripting -->
<script runat="server">
[WebMethod]
public static string GetTableData()
{
/* .. would normally be reading database database, formating JSON response string etc. */
/* Dummy data below is valid JSON with just one row of data */
string s = "{ \"data\": [ { \"id\": \"1\", \"name\": \"Tiger Nixon\", \"position\": \"System Architect\" } ] }";
return s;
}
</script>
<!-- Datatables Stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
</head>
<body>
<h2>Load data table with objects.</h2>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</tfoot>
</table>
<p>Output</p>
<div id="returnedData">
</div>
<!-- Client side scripting: script libraries for jQuery and DataTables -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// This makes an Ajax call and just shows the returned-data within a div.
$.ajax({
type: "POST",
url: "GetTableData.aspx/GetTableData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response)
{
// Show first row of data returne via AJAX
var myobj = JSON.parse(response.d);
$("#returnedData").append("<p>" + myobj.data[0].name +"<br />" + myobj.data[0].position +"</p>");
},
failure: function (response) {
alert('There was an error.');
}
});
// This attempts to make the same call as above, but this time through DataTables
// However it fails, the data is return in the success alert box, but not shown in the table.
$('#example').DataTable( {
"ajax": {
url: "GetTableData.aspx/GetTableData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
dataSrc: function (response) {
var myobj = JSON.parse(response.d);
alert("This is NOT shown!!"); // This code does not run.
return myobj.data;
},
error: function (response) {
alert("error: " + response.d);
},
success: function (response) {
alert("success: " + response.d); // This works! - you can see the data returned from the server
}
}
,
"columns": [
{ "data": "name" },
{ "data": "position" }
]
} );
} );
</script>
</body>
</html>
This question has an accepted answers - jump to answer
Answers
The
ajaxdocs state this:Try removing your
successfunction.Kevin
10/10 you have spotted the problem. It now works.
Thank you!