Question

我已经工作了一个星期，试图用他的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内容的格式化。有人有这个问题吗？

Answer 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设置为文字字符串，然后将其附加到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两次回调。这是不正确的，你应该只定义一次。

所以尽管如此，我只是好奇你从查询中检索了多少条记录？根据{{3}}数据表，如果您的数据低于50,000行，则使用默认的客户端设置可以很好地执行。

顺便说一下，我个人使用过它，这样可以轻松地设置它几乎毫不费力。所以我只是说你确定你需要ajax吗？你可能会不必要地转动你的车轮。只是值得深思。

JQuery Datatable JSON响应错误ColdFusion

1 个答案: