javascript - 服务器端 JQuery 数据表结果错误

Question

全部，

我正在使用在以下网站上找到的服务器端 Coldfusion jquery 数据表的一个很好的示例。 Site Here

在示例代码中，表和选择语句在 JS 文件中公开，我需要在搜索中包含多个表。原始代码如下所示。

原始工作代码

"fnServerData": function ( sSource, aoData, fnCallback ) {
    aoData.push(
        { "name": "table", "value": "ukLocationCodes" },
        { "name": "sql", "value": "SELECT [id], [varCode], [varLocation]" }
        );

        $.ajax( {"dataType": 'json',
             "type": "POST",
             "url": sSource,
             "data": aoData,
             "success": fnCallback} );

原始代码用于 ColdFusion 页面上的查询搜索。

 <cfquery name="rResult" datasource="A8002CMS">
    #preservesinglequotes(form.sql)#
    FROM #form.table#

    WHERE 1 = 1
<cfif len(form.sSearch)>
        AND (
<cfloop from="1" to="#listLen(variables.fieldlist)#" index="variables.index">
#listGetAt(variables.fieldlist, variables.index,',')# LIKE '%#form.sSearch#%' <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>
<!--- create the JSON response --->
<cfsavecontent variable="variables.sOutput"><cfoutput>{
    "sEcho": #form.sEcho#,
    "iTotalRecords": #qGetCount.fullCount#,
    "iTotalDisplayRecords": #rResult.recordcount#,
    "aaData": [ 
    <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 --->
"#rResult[variables.i][rResult.currentRow]#"
<cfif variables.i is not listLast(variables.fieldlist)>, </cfif>
</cfloop>]

更改了代码，在您输入搜索内容之前都可以正常工作

为了查找多个表并隐藏表和选择，我将JS脚本更改为以下内容。

$(document).ready(function() {
    var table = $('#displayData').dataTable( {
    "processing": true,
    "stateSave": true,
    "serverSide": true,
    "ajax": {
    "url": "MyVolunteers.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 );

将查询更改为如下所示。

<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>

数据在页面上显示正常，但是当我尝试使用数据表搜索功能时，在调试中出现以下错误。 元素 SECHO 在 FORM 中未定义

我认为可能是错误的。我认为这与我的新查询包含两个表有关，但我不太确定如何修复它。

Answer 1

我找出了导致您错误的原因。当我再次阅读你的帖子时，它突然引起了我的注意。

ORIGINAL WORKING CODE

"fnServerData": function ( sSource, aoData, fnCallback ) {
    aoData.push(
        { "name": "table", "value": "ukLocationCodes" },
        { "name": "sql", "value": "SELECT [id], [varCode], [varLocation]" }
        );

        $.ajax( {"dataType": 'json',
             "type": "POST",
             "url": sSource,
             "data": aoData,
             "success": fnCallback} );

 

CHANGED CODE, WORKS FINE UNTIL YOU TYPE IN A SEARCH

In order to lookup more than one table and hide the table and select, I changed the JS script to the following below.

$.ajax( {"dataType": 'json',
             "type": "POST",
             "url": sSource,
             "data": aoData,
             "success": fnCallback} );

当您更改旧数据表功能的代码时，问题首次出现。旧版数据表 ajax 在发布 ajax 请求时自动生成并传递 sEcho 参数。它还期望服务器响应在成功回调中回显该值。

那么当您将 ajax 更改为使用自定义 ajax 调用时发生了什么，这绕过了任何数据表内置功能(即不发送 sEcho)。

要纠正当前错误，您有多种选择。要正确纠正此问题，您可能不应该使用选项 3。

1. 将您的代码恢复为仅使用旧代码和 legacy parameters 。这意味着您的 ajax 必须像您最初使用的那样使用 bProcessing、bServerSide、sAjaxSource 和 fnServerData。

2. 使用upgrade guide 并将旧数据表转换为 v1.10。

3. 这是最简单的，但不推荐。由于您的自定义 ajax 不会发布 sEcho，因此请在 cfm 文件中注释掉对 form.sEcho 的引用。这将消除立即错误，但我不知道它会产生什么副作用。