No error but table is empty
No error but table is empty
spickens
Posts: 24Questions: 7Answers: 0
I am a newbie with low javascript skills. For 8 hours I've tried to find the incantation that will display my table data using CHROME Version 65.0.3325.181 (Official Build) (64-bit). The application is asp.net. The web page is the child of a master page. A server-side [webmethod] that is a static method in the page's .ASPX creates the data for the client-side javascript. Many variations have been tried. The table headings, etc. display just fine, but instead of data rows the table says, "No data available in table." Does anyone know how to fix this?.
Here is the JSON data returned by the [webmethod] to populate the table
[
{
"ExamSeriesCode": "BB-AL",
"NoShow": 1,
"NDARefused": 1,
"Tested": 65
},
{
"ExamSeriesCode": "AA-AL",
"NoShow": 1,
"NDARefused": 0,
"Tested": 64
}
]
**Here is the web page*
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ChartTable.aspx.cs" Inherits="OperationalStats.Forms.ChartTable" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type = "text/javascript">
$(document).ajaxError(function (event, xhr, options, exc) {
alert(exc.toString());
});
$(document).ready(function () {
$("#demoGrid").DataTable({
"processing": true,
"clientSide": true,
"pageLength": 25,
"paging": true,
"ajax": {
"url": "ChartTable.aspx/LoadData",
"type": "POST",
"datatype": "json",
"error": "ajaxError",
"contentType": "application/json",
"dataSrc": "",
},
"columnDefs":
[{
"targets": [0],
"visible": true,
"searchable": true
},
{
"targets": [1],
"searchable": true,
"orderable": true
},
{
"targets": [2],
"searchable": true,
"orderable": true
},
{
"targets": [3],
"searchable": true,
"orderable": true
}],
"columns": [
{ "data": "ExamSeriesCode", "name": "ExamSeriesCode", "autoWidth": true },
{ "data": "NoShow", "name": "NoShow", "autoWidth": true },
{ "data": "NDARefused", "name": "NDARefused", "autoWidth": true },
{ "data": "Tested", "name": "Tested", "autoWidth": true }
]
});
});
</script>
<div class="container">
<br />
<div style="width:90%; margin:0 auto;">
<table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" >
<thead>
<tr>
<th>ExamSeriesCode</th>
<th>NoShow</th>
<th>NDARefused</th>
<th>Tested</th>
</tr>
</thead>
</table>
</div>
</div>
</asp:Content>
This question has an accepted answers - jump to answer
Answers
Looks like it should work. Can you post a link to your page for debugging? If no try collecting debug output and providing the resulting URL.
Kevin
I'm unsure if I did the right thing, but the code seems to be "ohuwly" Is that what you mean by resulting URL?
Yes that looks correct, but http://debug.datatables.net/ohuwly is 404.
Could you try running it again please?
Allan
Ok. This time the code is uwoyob.
According to the debugger, this is the last JSON from the server. The data elements are correct. The payload should result in a table with only two rows.
{
"d": "[\r
{\r
\"ExamSeriesCode\": \"BB-AL\",\r
\"NoShow\": 1,\r
\"NDARefused\": 1,\r
\"Tested\": 65\r
},\r
{\r
\"ExamSeriesCode\": \"AA-AL\",\r
\"NoShow\": 1,\r
\"NDARefused\": 0,\r
\"Tested\": 64\r
}\r
]"
}
This looks suspicious -
"clientSide": true,, did you meanserverSide?What looks suspicious about it? I'm not trying to be sharp with you; in truth i have no idea. At the moment there are only two rows being returned. clientSide processing ought to be able to handle two rows.
clientSideisn't a valid option. Client-side processing is the default, which is toggled (server/client) by theserverSideoption.Now I see what you mean. I changed it to serverSide:false, but the change did not cause the proper operation, which you probably expected.
Righty ho, it was worth a try. Allan and Kevin are on the thread - I'm sure with their experience they'll spot something that I'm missing!
It looks like you will want to change your dataSrc from
"dataSrc": "",to"dataSrc": "d",. Your JSON data is in the objectd:Kevin
Well, I thought your answer was odd because my code didn't include a "d" So I looked around and found the article below, which explains why the "d" appears: it's a ASP.NET feature to prevent hacking. Maybe you knew that. Anyway, After changing dataSrc as you requested, the table is drawn (a great step!) but it is empty. Before drawing the empty table, the following error message is displayed twice: "DataTables warning: table id=demoGrid - Requested unknown parameter 'ExamSeriesCode' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4" Not sure what that tells me because as you can see ExamSeriesCode in the returned JSON response. Thoughts? If you want another debug, let me know. Thank you so much for your attention.
***** From https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/ *****
The ASP.NET AJAX library uses the “d” parameter formatting for JSON data. This forces the data in the example to appear in the following form:
{“d” : [“bankaccountnumber”, “$1234.56”] }
Because this is not a valid JavaScript statement, it cannot be parsed and instantiated as a new object in JavaScript. This therefore prevents the cross-site scripting attack from accessing data from AJAX JSON services on other domains.
The Microsoft Ajax client libraries automatically strip the “d” out, but other client libraries, such as JQuery, would have to take the “d” property into account when using such services.
This last problem is along the same lines, the MS response is adding in loads of backslashes that will mess with the JSON, so this needs to be cleansed before being passed to DataTables.
To do that, use
ajax.dataSrc, the one you modified already for the "d", but replace that with this instead:Hopefully that'll be the last hurdle to getting that data into the table.
By god, man. That's it!! You folks have been wonderful. Thank you ever so much.