Question

我发布了一个我想要做的非常简单的例子，因为这样解释起来更容易。

我有一个填充了cfquery的数据表。
当您双击表格行时，JQuery脚本会将RecordID作为url变量发送到操作页面。
操作页面获取url变量并将其传递给删除查询，该查询将从填充页面上表格的SQL表中删除。
如果刷新/重新加载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 success的{{1}}函数删除该行。

CF代码：

post

jquery的：

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

jquery .post documentation

从评论中编辑：

如果您使用$.post('TESTACTION.cfm?RecordID='+ RecordID, function(){ $("#row_" + RecordID).remove(); });，则应该可以通过行ID：

来执行此操作

fnDeleteRow

JQuery DataTables - 在PostFr冷却后刷新表数据

1 个答案: