JQuery DataTables - Refresh Table Data After Post ColdFusion

Question

I am posting a very simple example of what I want to do, because it is easier to explain.

• I have a datatable filled with cfquery.
• When you double-click on a table row, the jQuery script will send the RecordID to the action page as a URL variable.
• The action page takes the url variable and passes it to the delete request, which removes it from the SQL table that populates the table on the page.
• If you refresh / reload the cfm page, the query will run again and the table will be updated, minus the row that was just deleted.

So here is my problem. I want this table to be automatically updated with a double click without reloading the page. I understand that this is not suitable for this, but I need advice. Just told me that “you need ajax answer” doesn't help much. I need examples or a better explanation. I read for several days, but I can not understand server-side processing and get 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 is 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 idto your lines and use the successjquery function postto remove the line.

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

:

fnDeleteRow, :

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