DataTables warning - Request unknown parameter 0 for row 0, column 0

2024/2/26 21:39:31

I'm using a jQuery DataTable to display data taken from a database using a stored procedure and web service. I can run the SP or service using Fiddler just fine, but when it comes to populating the DataTable I get the error documented here. In my specific case the message is:

"DataTables warning: table id=tblCashRecord - Requested unknown parameter '0' for row 0, column 0"

What happens then is that my DataTable shows the correct number of rows, but all of the cells are empty.

I'm pretty sure the number of columns in the HTML table are the same as the number of columns I'm pushing to using aoColumns (it's four), but I could be wrong. I know there are plenty of the same question being asked, but this is the only one I found useful that might be relevant, and I've also tried this without success.

My HTML table:

<table id="tblCashRecord" class="table table-bordered"><thead><tr><th>Kiosk Name</th><th>Service Type</th><th>Transaction Timestamp</th><th>Amount (RM)</th></tr></thead><tbody></tbody><tfoot><tr><th colspan="3" style="text-align: right">Total:</th><th><span id="totalAmount" style="margin-left: -8px;"></span></th></tr></tfoot>
</table>

My Javascript:

$.ajax({type: "POST",url: "../Services/Report.svc/GetCashPaymentRecord/?s=" + session + "&r=" + reference,data: "{\"kioskID\":" + JSON.stringify(kioskID) + "," + "\"startDate\": " + JSON.stringify(startDate) + "," + "\"endDate\":" + JSON.stringify(endDate) + "}",contentType: "application/json; charset=utf-8",dataType: "json",success: function (response) {if (response.success == true) {if (response.cashPayment != null && response.cashPayment.length > 0) {cashList = response.cashPayment;var data = { "aaData": [] };$('#tblCashRecord').dataTable().fnClearTable();$('#tblCashRecord').dataTable().fnDestroy();$.each(response.cashPayment, function (item) {data.aaData.push({"id": item.id,"kioskName": item.kioskName,"total": item.total,"transactionTimestamp": moment.utc(item.transactionTimestamp).format("DD-MM-YY HH:mm:ss"),"serviceType": item.serviceType,"paymentType": item.paymentType, //remove later in SP"paymentRecordID": item.paymentRecordID});});table = $('#tblCashRecord').DataTable({"paging": false,"ordering": false,"bAutoWidth": false,"bSortable": false,"bFilter": false,"bInfo": false,dom: 'Blfrtip',"aaData": data.aaData,"aaColumns": [{ "mData": "kioskName" },{ "mData": "serviceType" },{ "mData": "transactionTimestamp" },{ "mData": "total" }]});$('#tblCashRecord tbody tr').each(function () {var col = $(this).find('td:eq(3)').html();total += parseFloat(col);});$('#totalAmount').html(total.toFixed(2));$('.sorting_asc').removeClass('sorting_asc');}else {$('#tblCashRecord').dataTable().fnClearTable();$('#tblCashRecord').dataTable().fnDestroy();$('#tblCashRecord').dataTable({"paging": false,"ordering": false,"bAutoWidth": false,"bSortable": false,"bFilter": false,"bInfo": false,"oLanguage": {"sEmptyTable": "No Record Found."}});$('#totalAmount').html("");$('.sorting_asc').removeClass('sorting_asc');}}else {$('#tblCashRecord').dataTable().fnClearTable();$('#tblCashRecord').dataTable().fnDestroy();$('#tblCashRecord').dataTable({"paging": false,"ordering": false,"bAutoWidth": false,"bSortable": false,"bFilter": false,"bInfo": false,"oLanguage": {"sEmptyTable": "Error: Could not load data."}});$('#totalAmount').html("");$('.sorting_asc').removeClass('sorting_asc');}}});

My web service:

cashPaymentResponse IReport.GetCashPaymentRecord(string session, string reference, cashPaymentRequest request){Guid sessionID, referenceID, kioskID;Guid.TryParse(session, out sessionID);Guid.TryParse(reference, out referenceID);Guid.TryParse(request.kioskID, out kioskID);if (sessionID == Guid.Empty){return new cashPaymentResponse("Invalid Session.");}DateTime startDate, endDate;try{startDate = new DateTime(Convert.ToInt32(request.startDate.Substring(6, 4)), Convert.ToInt32(request.startDate.Substring(3, 2)), Convert.ToInt32(request.startDate.Substring(0, 2)), 0, 0, 0);endDate = new DateTime(Convert.ToInt32(request.endDate.Substring(6, 4)), Convert.ToInt32(request.endDate.Substring(3, 2)), Convert.ToInt32(request.endDate.Substring(0, 2)), 23, 59, 59);}catch (Exception ex){return new cashPaymentResponse("No Date Selected.");}List<ReportCashPaymentRecord_Result> result;try{using (MyDBEntities context = new MyDBEntities()){result = context.ReportCashPaymentRecord(sessionID, kioskID, startDate, endDate).ToList();}}catch (Exception ex){if (isDebug() == false){return new cashPaymentResponse("Database connection failed.");}else{return new cashPaymentResponse(ex.Message);}}if (result.Count > 0){cashPaymentResponse response = new cashPaymentResponse();cashPaymentItem item;response.cashPayment = new List<cashPaymentItem>();for (int i = 0; i < result.Count; i++){item = new cashPaymentItem();if (result[i].kioskName == "session"){return new cashPaymentResponse("Invalid Session.");}else{item.id = (Guid)result[i].cashID;item.paymentRecordID = (Guid)result[i].paymentRecordID;item.total = (decimal)result[i].total;item.transactionTimestamp = JsonConvert.SerializeObject(new DateTime(result[i].transactiontimestamp.Value.Year, result[i].transactiontimestamp.Value.Month, result[i].transactiontimestamp.Value.Day, result[i].transactiontimestamp.Value.Hour, result[i].transactiontimestamp.Value.Minute, result[i].transactiontimestamp.Value.Second, 0, DateTimeKind.Utc)).Replace("\"", "");item.kioskName = result[i].kioskName;item.serviceType = (result[i].serviceType.ToString() == "0") ? "Assessment" : (result[i].serviceType.ToString() == "1") ? "Water Bill" : (result[i].serviceType.ToString() == "2") ? "Rental" : (result[i].serviceType.ToString() == "3") ? "Compound" : "None";item.paymentType = (result[i].paymentType.ToString() == "1") ? "Cash" : (result[i].paymentType.ToString() == "3") ? "Credit Card" : (result[i].paymentType.ToString() == "2") ? "Cheque" : "None";response.cashPayment.Add(item);}}return response;}else{return new cashPaymentResponse();}}

My JSON Response (there are actually 8 entries, but I included only the first one to reduce clutter):

{"success": true,"cashPayment": [{"id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx","kioskName": "00001","paymentRecordID": "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy","paymentType": "Cash","serviceType": "Water Bill","total": 100,"transactionTimestamp": "2016-01-21T10:15:21Z"}]
}

EDIT: I have edited the GUIDs in the response above to remove sensitive information.

Answer

Classic hungarian notation typo. aaColumns should be aoColumns - for array object. Then I am sure it will work. aoColumns is BTW from 1.10.x now called columns (but both names is still supported).

In general, use the new 1.10.x camelcase naming convention and please skip all that qouting around literal names :

table = $('#tblCashRecord').DataTable({paging: false,ordering: false,autoWidth: false,sortable: false,filter: false,info: false,dom: 'Blfrtip',data: data.aaData,columns: [{ data: "kioskName" }, { data: "serviceType" }, { data: "transactionTimestamp" },{ data: "total" }]
});

Update per comment. The reason for empty cells, after you have corrected "aaColumn", is that you are using $.each the wrong way :

$.each(response.cashPayment, function (item) {

should be

$.each(response.cashPayment, function (index, item) { //<----data.aaData.push({"id": item.id,

You are accidently trying to take the attributes out of the index, not the object.

http://en.ppmy.cn/q/41217.html

Related Q&A

How can I get the previous URL of a tab?

When writing a Chrome extension, given a tab, how can I get the URL of the previously-visited page in that tab? i.e. the url that will appear in the omnibar after I hit "back"?

Javascript isnt uploading binary data

My javascript function only uploads text files correctly. Can anybody help me figure out how to make it also accept images etc. ?function fileUpload(files) {if (!files.length) { fileList.innerHTML = …

Sharing data between components in React

Im developing an app using Meteor and React as view engineConsider this diagram:React hide component from another exampleI need to change C2 component state when C4 button click event is fired. Since t…

What is the global scope of script tag?

I had made flag and made my previous question deleted because of missunderstanding. Im working on a classic asp project. lets say you have so many <script></script> tags in your code. For …

Why onchange doesnt work?

Im just looking for an answer on the net but I havent reached any one. Im playing with googles api translation and I have a problem with JS. In fact my code is 100% ok except one operation.My problem i…

How to handle multiple sign in methods for the same user in Firebase?

Im currently developing an authentication system with Firebase. Id like my system to accept email/password, Google and Facebook as sign-up and sign-in methods.So far, so good. Everything works good whe…

value of select elements with e.value vs e.options[e.selectedIndex].value

Given the HTML:<select id="mySelect"><option value="1">test1</option><option value="2">test2</option><option value="3">test3&…

Facebook Login not open in Safari/ iPhone

I am creating one application which show Facebook friend. First, user need to click on login button then one simple popup screen will appear after filling login id and password it will show friend list…

React Infinite Scroller - Two children with the same key. loadMore function being called twice

Im trying to build an infinite scroll of posts similar to facebook using react-infinite-scroller. However, its giving me the same error multiple times in the console - "Encountered two children wi…

How to create prepared statements in Sequelize?

First is it possible, I think it should be as theyre safer than raw queries and prevent sql injection.But there is literally nothing I can find in documentation.sequelize.prepare <- doesnt existsequ…