javascript - JQuery 数据表 JSON 响应错误 ColdFusion

我已经工作了一个星期，试图帮助一位 friend 处理他的 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 内容的格式。有人遇到过这个问题吗？

最佳答案

尽管我将此作为答案发布，但它实际上是格式化的评论。话虽如此，如果不查看代码的完整情况，就很难知道发生了什么。但我认为您应该解决以下一些问题。一次从一件事开始。

从第一个错误开始，您会在 js 堆栈跟踪中注意到，给出最大线索的行是 at HTMLDocument.<anonymous> (index.cfm:897) 。该行是错误的根源。请注意，第 897 行不是 index.cfm 源代码中的行。，而是渲染的 HTML 输出的行号。这可以在浏览器的开发者工具中确定。
在第二个错误中，Uncaught TypeError: Cannot read property '0' of undefined堆栈跟踪仅引用 jquery.dataTables.min.js所以我不可能知道错误的根源是什么。当尝试访问 undefined variable 的属性或方法时，会出现此错误。最重要的是，数据表无法引用它所期望的对象。
我不确定这是做什么的:<cfset E = "+row[0]+"/> 。您正在设置E到文字字符串，然后将其附加到 href <a> 的属性标签？我不确定你想要什么，所以除了可能不正确之外我没有其他建议。
您的"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 行，则使用默认的客户端设置，datatables 的性能就很好。

顺便说一句，我个人使用过这个，它的设置非常简单，几乎毫不费力。所以我只是说你确定需要ajax吗？你可能会不必要地浪费时间。仅供思考。

关于javascript - JQuery 数据表 JSON 响应错误 ColdFusion，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48908066/

javascript - JQuery 数据表 JSON 响应错误 ColdFusion

上一篇：javascript - 使用 AJAX 实现分页后，添加到购物车不起作用

下一篇：javascript - 选择下拉菜单出现在 Shiny 的其他元素后面