JQuery Datatable JSON响应错误ColdFusion答案

【问题标题】：JQuery Datatable JSON response error ColdFusionJQuery Datatable JSON响应错误ColdFusion
【发布时间】：2018-02-21 14:13:49
【问题描述】：

我已经工作了一个星期，试图帮助一个朋友处理他的 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 Overflow 和 JQuery DataTable 站点，但没有真正谈论 JSON 内容的格式。有人遇到过这个问题吗？

【问题讨论】：

标签： javascript jquery coldfusion datatables

【解决方案1】：

即使我将其发布为答案，它实际上是一个格式化的评论。话虽如此，如果不查看代码的全貌，就很难知道发生了什么。但这里有一些我认为你应该解决的意见。一次从一件事开始。

从您的第一个错误开始，您会注意到在 js 堆栈跟踪中，提供最大线索的行是 at HTMLDocument.<anonymous> (index.cfm:897)。此行是错误的来源。请注意，第 897 行不是您的index.cfm 源代码中的行，而是您呈现的 HTML 输出的行号。这可以在浏览器的开发者工具中确定。
在第二个错误中，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 属性，不属于您的代码。
- 要使用 ajax，在 1.10 下，您必须使用选项 serverSide: true 和 ajax: function ( data, callback, settings ) {//do stuff here.....}。
您定义了两次columnDefs.render 回调。这是不正确的，您应该只定义一次。

说了这么多，我只是想知道您从查询中检索了多少条记录？根据docs，如果您的数据少于 50,000 行，则使用默认客户端设置的数据表性能很好。

顺便说一句，我亲自使用过它，而且设置起来非常简单，几乎不费吹灰之力。所以我只是说你确定你需要ajax吗？你可能会不必要地旋转你的轮子。值得深思。

【讨论】：