JQuery Datatables & ColdFusion - 如何获取该格式的数组源数据？答案

【问题标题】：JQuery Datatables & ColdFusion - How do I get the array source data in that format?JQuery Datatables & ColdFusion - 如何获取该格式的数组源数据？
【发布时间】：2014-04-11 14:51:22
【问题描述】：

我正在按照此页面上的示例为 JQuery 数据表设置 Ajax 源。 http://datatables.net/release-datatables/examples/ajax/objects.html

如果我从源文件开始，就像他们的示例数组一样，我可以重新创建它，格式如下。

{
  "aaData": [
    {
       "engine": "Trident",
       "browser": "Internet Explorer 4.0",
       "platform": "Win 95+",
       "version": "4",
       "grade": "X"
    },
    {
       "engine": "Trident",
       "browser": "Internet Explorer 5.0",
       "platform": "Win 95+",
       "version": "5",
       "grade": "C"
    }
  ]
 }

但是，我正在使用 ColdFusion，我希望我的源数据来自查询。因此，我遵循了另一个关于从 cfquery 填充数组的示例。 http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec09f0b-7fea.html

这将使我的示例数据数组采用以下格式。

RecordID: 2, Name: Al
RecordID: 1, Name: Mike
RecordID: 3, Name: Bill

如何运行 cfquery 以 sAjaxSource 属性所需的正确格式填充我的源文件？

【问题讨论】：

标签： jquery ajax arrays coldfusion datatables

【解决方案1】：

我写了JSON converter specifically for this：

<cfset rs.dt = new DataTables() />
<cfset rs.dt.setData( yourQuery ) /> <!--- yourQuery = ColdFusion query --->
<cfset rs.dt.setDataFormat( "struct" ) />
<cfreturn rs.dt.$renderData() />

将您的 ColdFusion 查询转换为 jQuery DataTables 格式。

DataTables.cfc 需要位于同一存储库中的 ArrayCollection.cfc。

【讨论】：

KungFoo 示例应用程序（有两个）是有用的学习资源，感谢分享。
您甚至提供了一个 apache-derby 数据库并提供了一个数据库查看器的链接！太棒了！

【解决方案2】：

感谢您的回复。我最终使用了我在网上找到的一些代码来让它工作。

这是我的源表 (DataSource.cfm)

<cfquery name="Query1" datasource="x">
    Select RecordID, NAME
    From TestTable
</cfquery>

<cfset data = [] />

<cfoutput query="Query1">
    <cfset obj = {
        "RecordID" = RecordID,
        "NAME" = Name
     } />
    <cfset arrayAppend(data, obj) />
</cfoutput>


<cfprocessingdirective suppresswhitespace="Yes">
    <cfoutput>
        {"aaData":
        #serializeJSON(data)#
        }
    </cfoutput>
</cfprocessingdirective>

<cfsetting enablecfoutputonly="No" showdebugoutput="No">

这是 JQuery

<script>
$(document).ready(function() {
    var oTable = $('#example').dataTable( {
    "bJQueryUI": true,
        "bProcessing": true,
    "bServerSide": false,
    "sAjaxSource": "DataSource.cfm",
    "aoColumns": [
         { "mData": "RecordID" },
         { "mData": "NAME" }
    ]
         });
    });
 </script>

这是页面的正文

<form>
        <div id ="div1" class="dataTables_wrapper">
            <table id="example">
                <thead>
                    <tr>
                        <th>RecordID</th>
                        <th>NAME</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </form>

【讨论】：

很好地详细说明了这个答案，谢谢。完美运行。现在我需要做的就是调整它以使其成为可编辑的表格。

【解决方案3】：

创建一个结构变量（我们称之为myVar）。
在该结构中创建一个名为 appData 的键并将其设置为一个空数组。
遍历查询并在循环内部创建一个结构（我们称之为myStruct）
仍在循环中，为 myStruct 创建名为 engine、browser 等的键，并根据查询行中的相关数据填充这些键。
仍在循环内，将myStruct 附加到myVar.appData 数组中。
循环之后，myVar 的结构应该与您的示例类似，如果没有，则说明您在某处出错。

【讨论】：