JQuery DataTables - Refresh Table Data After Post - ColdFusion

Question

I'm posting a very simple example of what I want to do because it's easier to explain that way.

1. I have a datatable populated with a cfquery.
2. When you double click on a table row, the JQuery script will send the RecordID to an action page as a url variable.
3. The action page takes the url variable and passes it into a delete query which deletes from the SQL table that populates the table on the page.
4. If you refresh/reload the cfm page, the query runs again and the table is updated, minus the row that was just deleted.

So, here's my issue. I want this table to be updated automatically on the double click without having to reload the page. I realize that this isn't setup the proper way for that, but I need advice. Just telling me that "you need an ajax response" doesn't help much. I need examples or a better explanation. I've been reading for days, but I can't figure out the server side processing and getting a json or ajax response. I need help.

Start by using this simple data...

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

Next, here's the cfm page...

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

Finally, the TESTACTION.cfm page...

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

Answer 1

Add an id to your rows and use the success function of the jquery post to delete the row.

CF code:

<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

Edit from comments:

If you use fnDeleteRow, you should be able to do it by the row id:

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