JQuery DataTables - 发布后刷新表数据 - ColdFusion

Question

我发布了一个非常简单的示例来说明我想要做什么，因为这样更容易解释。

1. 我有一个用 cfquery 填充的数据表。
2. 当您双击表格行时，JQuery 脚本会将 RecordID 作为 url 变量发送到操作页面。
3. 操作页面获取 url 变量并将其传递到删除查询，该查询将从填充页面上表的 SQL 表中删除。
4. 如果您刷新/重新加载 cfm 页面，查询会再次运行，并且表会更新，减去刚刚删除的行。

所以，这是我的问题。我希望双击时自动更新该表，而无需重新加载页面。我意识到这不是正确的设置方式，但我需要建议。只是告诉我“你需要 ajax 响应”并没有多大帮助。我需要例子或更好的解释。我已经读了好几天了，但我无法弄清楚服务器端处理并获取 json 或 ajax 响应。我需要帮助。

从使用这个简单的数据开始......

CREATE TABLE [dbo].[TEST]([RecordID] [int] NULL,[Name] [varchar](25) NULL)

Insert into TEST (RecordID, Name)
Values ('1','Mike')

Insert into TEST (RecordID, Name)
Values ('2','Bill')

Insert into TEST (RecordID, Name)
Values ('3','Joe')

接下来，这是 cfm 页面...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../JQuery/js/datatables/DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css"/>


<script>
    $(document).ready(function() {
        var table1 = $("#table1").dataTable({bJQueryUI:true});

        //when you double click a row in this table it will grab the RecordID
        $("#table1 tr").dblclick(function() {
            var RecordID = $(this).find("#RecordID").text();

            //If the RecordID is defined, show it in an alert, then send back to the action page where it uses the URL variable in a delete query.
            if(RecordID) {
                alert(RecordID);
                $.post('TESTACTION.cfm?RecordID='+ RecordID);       
            }
        });
    });
</script>

<!---This query populates the table--->
<cfquery name="Query1" datasource="x">
    Select RecordID, NAME
    From TEST
</cfquery>

    <form>
        <div id ="div1" class="dataTables_wrapper">
            <table id="table1" class="dataTable">
                <thead>
                        <tr>
                            <th>RecordID</th>
                            <th>Name</th>
                        </tr>
                </thead>
                <tbody>
                    <cfoutput query = "Query1">
                        <tr>
                            <td id="RecordID">#Query1.RecordID#</td>
                            <td>#Query1.NAME#</td>
                        </tr>
                    </cfoutput>
                </tbody>
            </table>
        </div>

    </form>

最后，TESTACTION.cfm 页面...

<cfif isdefined("url.RecordID")>
    <cfquery name="x" datasource="x">
        Delete from TEST where RecordID = '#url.RecordID#'
    </cfquery>
</cfif>

Answer 1

向您的行添加 id 并使用 jquery post 的 success 函数删除该行。

CF代码:

<cfoutput query = "Query1">
    <tr id="row_#Query1.RecordID#>
        <td id="RecordID">#Query1.RecordID#</td>
        <td>#Query1.NAME#</td>
    </tr>
</cfoutput>

jquery:

$.post('TESTACTION.cfm?RecordID='+ RecordID, function(){
    $("#row_" + RecordID).remove();
});

jquery .post documentation

根据评论进行编辑:

如果您使用fnDeleteRow，您应该能够通过行 ID 来完成此操作:

$.post('TESTACTION.cfm?RecordID='+ RecordID, function(){
    //$("#row_" + RecordID).remove();
    table1.fnDeleteRow(table1.fnGetPosition($("#row_" + RecordID)));
});