jQuery數據表JSON響應錯誤ColdFusion
[英]JQuery Datatable JSON response error ColdFusion
問題描述
我已經工作了一個星期，試圖幫助一個朋友使用他的JQuery數據表。 該表顯示了志願者申請者以及通過一項活動取得的進展。 前端頁面包含JS Datatable腳本，而ColdFusion頁面用於查詢MySQL數據庫。 最初加載頁面時，調試控制台中將顯示以下錯誤。
Uncaught TypeError: Cannot read property 'DT_RowId' of undefined
at Object.rowIdFn (jquery.dataTables.min.js:19)
at N (jquery.dataTables.min.js:16)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:92)
at Function.each (jquery.js:374)
at n.fn.init.each (jquery.js:139)
at n.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
at HTMLDocument.<anonymous> (index.cfm:897)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at Function.ready (jquery.js:3417)
然后，當JS腳本刷新並重新檢查數據庫時，出現以下錯誤。
Uncaught TypeError: Cannot read property '0' of undefined
at jquery.dataTables.min.js:19
at Object.b.fnGetData (jquery.dataTables.min.js:12)
at B (jquery.dataTables.min.js:17)
at Ga (jquery.dataTables.min.js:14)
at mb (jquery.dataTables.min.js:66)
at T (jquery.dataTables.min.js:31)
at Ub (jquery.dataTables.min.js:107)
at r.<anonymous> (jquery.dataTables.min.js:108)
at r.iterator (jquery.dataTables.min.js:99)
at r.<anonymous> (jquery.dataTables.min.js:108)
這是JS文件的樣子。 我正在嘗試使用JQuery Datatable版本1.10。
$(document).ready(function() {
var table = $('#displayData').dataTable({
"processing": true,
"stateSave": true,
"serverSide": true,
"ajax": {
"url": "MyVolunteerCheck.cfm",
"type": "POST"
},
"columns": [{
"name": "EMPLOYEE_ID",
"className": "hidden"
},
{
"name": "EVER_NUM",
"className": "hidden",
"orderable": "true"
},
{
"name": "LAST_NAME",
"title": "LAST NAME",
"orderable": "true"
},
{
"name": "FIRST_NAME",
"title": "FIRST NAME",
"orderable": "true"
},
{
"name": "SortOrderDate",
"title": "APP DATE",
"orderable": "true"
},
{
"name": "DOCS_VER",
"className": "hidden"
},
{
"name": "DOCS_WAIT",
"title": "APP STATUS",
"orderable": "true"
},
{
"name": "APP_STATUS",
"title": "PROGRESS",
"orderable": "true"
},
{
"name": "LOCATION_NAME",
"title": "LOCATION",
"orderable": "true"
},
{
"title": "OPTIONS",
"orderable": "false"
}
],
"columnDefs": [
{ <cfset E = "+row[0]+" />
"render": function(data, type, row) {
return "<a class='btn btn-primary btn-xs' href='candidate/?select="#E#"'>view</a> <a class='btn btn-success btn-xs' href='candidate/?select=#e_id#" + "'>edit</a>";
},
"targets": -1
},
{
"render": function(data, type, row) {
var color = 'black';
if (row[5] == 1) {
color = 'green';
ColorCheck = 'VALIDATED';
IconChoice = ' fa fa-check-square-o';
} else if (row[6] == 1) {
color = 'orange';
ColorCheck = 'WAITING';
IconChoice = 'fa fa-spin fa-spinner';
} else {
color = 'red';
ColorCheck = 'NON-VALID';
IconChoice = 'fa fa-exclamation-triangle';
}
return '<span style="color:' + color + '"><i class="' + IconChoice + '"></i> ' + ColorCheck + '</span>';
},
"targets": -4
},
{
"render": function(data, type, row) {
var appstat = 'black';
if (row[5] == 1) {
appstat = 'green';
TextStatus = 'FINISHED';
IconChoice = 'fa fa-check';
} else {
appstat = 'black';
var TextStatus = row[7];
IconChoice = 'fa fa-chevron-right';
}
return '<span class="text-uppercase" style="color:' + appstat + '"><i class="' + IconChoice + '"></i> ' + TextStatus + '</span>';
},
"targets": -3
},
{
"visible": false,
"targets": [0]
}
],
"pagingType": "full_numbers",
"order": [
[2, 'asc']
],
"language": {
"lengthMenu": "Page length: _MENU_",
"search": "Filter:",
"zeroRecords": "No matching records found"
},
"data": function(sSource, aoData, fnCallback) {
aoData.push();
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});
setInterval(function() {
$('#displayData').DataTable().ajax.reload();
}, 30000);
在Coldfusion頁面上，系統檢查兩個表，並應返回信息，但它會不斷出錯。 下面包括我的CF頁面。
<cfsilent>
<cfparam name="form.table" default="">
<cfparam name="form.columns" default="">
<cfparam name="form.editButtonText" default="">
<cfparam name="form.editButtonTarget" default="">
<cfparam name="form.search" default="">
<cfparam name="variables.fieldlist" default="">
<cfsetting showDebugOutput="true">
<cfsetting enablecfoutputonly="true">
<cfprocessingdirective suppresswhitespace="true">
<!--- this comes from the AJAX script in the template --->
<cfset variables.fieldlist=form.columns>
<cfset variables.count=0>
<!--- strip off the comma if it is the last element --->
<cfif right(variables.fieldlist,'1') EQ ",">
<!--- last char is a comma --->
<cfset variables.listLength = len(variables.fieldlist)>
<cfset variables.fieldlist = left(variables.fieldlist, variables.listLength-1)>
</cfif>
<!--- get count of records --->
<cfquery name="qGetCount" datasource="MySQLDATABASE">
SELECT COUNT(*) AS fullCount
FROM VOLTABLE1
WHERE ARCHIVE IS NULL
</cfquery>
<cfquery name="rResult" datasource="MySQLDATABASE">
SELECT VOLTABLE1.EMPLOYEE_ID, VOLTABLE1.EVER_NUM, VOLTABLE1.LAST_NAME, VOLTABLE1.FIRST_NAME, VOLTABLE1.DOCS_VER, VOLTABLE1.DOCS_WAIT, VOLTABLE1.APP_STATUS, VOLTABLE1.LOCATION_ID, DATE_FORMAT(VOLTABLE1.EMPLOYEE_DATE,'%Y-%m-%d %r') AS SortOrderDate, VOLTABLE2.LOCATION_NAME
FROM VOLTABLE1
RIGHT JOIN
VOLTABLE2
ON VOLTABLE1.LOCATION_ID = VOLTABLE2.LOCATION_ID
WHERE 1 = 1 AND VOLTABLE1.ARCHIVE IS NULL
<cfif len(form.search)>
AND (
<cfloop from="1" to="#listLen(variables.fieldlist)#" index="variables.index">
#listGetAt(variables.fieldlist, variables.index,',')# LIKE '%#form.search#%' <cfif variables.index LT listLen(variables.fieldlist)> OR </cfif>
</cfloop>
)
</cfif>
<cfif isdefined('form.iSortCol_0')>
ORDER BY
<cfloop from="0" to="#form.iSortingCols-1#" index="variables.i">
#listGetAt(variables.fieldlist,form["iSortCol_#variables.i#"]+1)# #form["sSortDir_#variables.i#"]#
<cfif variables.i is not form.iSortingCols-1>,
</cfif>
</cfloop>
</cfif>
</cfquery>
<!--- strip off the table name from the values, otherwise it will break making the json --->
<cfset variables.fieldlist = ReplaceNoCase(variables.fieldlist,'VOLTABLE1.','','all')>
<cfset variables.fieldlist = ReplaceNoCase(variables.fieldlist,'VOLTABLE2.','','all')>
<!--- This is where I think the error is happening, I've read the JQuery Datatable documentation and I still am unable to resolve the issue.--->
<cfsavecontent variable="variables.sOutput">
<cfoutput>{
"draw": #form.draw#,
"recordsTotal": #qGetCount.fullCount#,
"recordsFiltered": #rResult.recordcount#,
"data": [
<cfloop query="rResult" startrow="#form.iDisplayStart+1#" endrow="#form.iDisplayStart+form.iDisplayLength#"><cfset variables.count=variables.count+1>
[
<cfloop list="#variables.fieldlist#" index="variables.i">
<!--- custom translations --->
<cfset outputResults = ReplaceNoCase(rResult[variables.i][rResult.currentRow],'"','', 'ALL' ) />
"#outputResults#"
<cfif variables.i is not listLast(variables.fieldlist)>, </cfif>
</cfloop>
]
<cfif rResult.recordcount LT form.iDisplayStart+form.iDisplayLength>
<cfif variables.count is not rResult.recordcount AND rResult.recordcount NEQ rResult.currentRow>,</cfif>
<cfelse>
<cfif variables.count LT form.iDisplayLength>,</cfif>
</cfif>
</cfloop>
]}
</cfoutput>
</cfsavecontent>
</cfprocessingdirective>
</cfsilent>
<cfoutput>#variables.sOutput#</cfoutput>
我知道我遺漏了一些東西，或者我的JSON調用不正確，我已經通過Stack溢出和JQuery DataTable站點進行了閱讀，並且沒有真正談論JSON格式的東西。 有人遇到過這個問題嗎？
1 個解決方案
解決方案1
1 2018-02-22 03:03:07
即使我將其發布為答案，它實際上也是帶格式的注釋。 如此說來，如果不查看代碼的完整圖片就很難知道發生了什么。 但是，我認為您應該處理一些觀察結果。 一次開始一件事情。
從第一個錯誤開始，您會在js堆棧跟蹤中注意到，提供最大線索的那一行是
at HTMLDocument.<anonymous> (index.cfm:897)。 此行是錯誤的來源。 請注意，行號897不是index.cfm源代碼中的行，而是渲染的HTML輸出的行號。 這可以在瀏覽器的開發人員工具中確定。在第二個錯誤中，
Uncaught TypeError: Cannot read property '0' of undefined的Uncaught TypeError: Cannot read property '0' of undefined堆棧跟蹤僅引用jquery.dataTables.min.js因此我無法知道錯誤的根源。 嘗試獲取未定義變量的屬性或方法時，將發生此錯誤。 最重要的是，數據表無法引用它期望的對象。我不確定這是干什么的：
<cfset E = "+row[0]+"/>。 您是將E設置為文字字符串，然后將其附加到<a>標記的href屬性嗎？ 我不確定您要干什么，因此除了可能不正確之外，我沒有其他建議。您的
"data": function ( sSource, aoData, fnCallback ) {//stuff....}。 我不知道從哪里開始，因為我不知道您從何處獲取此代碼。 我在下面的觀點是假定這將是您對服務器的Ajax回調。- 據我所知，
data選項僅用於客戶端，顯然您將其編碼為服務器端ajax調用。 - 您的參數
sSource, aoData, fnCallback都是1.9的舊屬性，不屬於您的代碼。 - 要在1.10以下使用ajax，必須使用選項
serverSide: true和ajax: function ( data, callback, settings ) {//do stuff here.....}。
- 據我所知，
您將兩次定義
columnDefs.render回調。 這是不正確的，您只應定義一次。
所以說了這么多，我很好奇您從查詢中檢索了多少條記錄？ 根據docs的數據表，如果您的數據少於50,000行，則使用默認的客戶端設置即可正常運行。
順便說一句，我親自使用了它，因此設置起來非常容易，幾乎毫不費力。 所以我只是說您確定需要ajax嗎？ 您可能不必要地旋轉了車輪。 值得深思。
使用jquery數據表時出現JSON錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.