我正在使用jQuery DataTable来显示使用存储过程和Web服务从数据库中获取的数据。我可以使用Fiddler运行SP或服务，但是当填充DataTable时，我会收到错误记录here。在我的具体情况下，消息是：
“DataTables警告：table id = tblCashRecord - 第0行，第0列请求的未知参数'0'”
然后我的DataTable会显示正确的行数，但所有单元格都是空的。
我很确定HTML表中的列数与我使用aoColumns（它的四个）推送的列数相同，但我可能错了。我知道有很多相同的问题被问到，但this是我发现的唯一可能有用的问题，而且我也尝试this但没有成功。
我的HTML表格：
<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>
我的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');
}
}
});
我的网络服务：
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();
}
}
我的JSON响应（实际上有8个条目，但我只包含了第一个减少混乱的条目）：
{
"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"
}
]
}
编辑：我在上面的回复中编辑了GUID以删除敏感信息。
答案 0 :(得分：5)
经典的匈牙利符号拼写错误。 aaColumns应为aoColumns - a rray o 对象。然后我相信它会奏效。 aoColumns是来自1.10.x的BTW，现在称为columns（但仍支持这两个名称）。
一般情况下，使用新的1.10.x camelcase命名约定，请跳过围绕文字名称的所有qout：
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" }
]
});
更新。在您更正＆＃34; aaColumn＆＃34;之后，空单元格的原因是您使用$.each错误的方式：
$.each(response.cashPayment, function (item) {
应该是
$.each(response.cashPayment, function (index, item) { //<----
data.aaData.push({
"id": item.id,
您无意中尝试从索引中取出属性，而不是对象。