JQuery DataTables - Обновить данные таблицы после Post ColdFusion

Question

Я публикую очень простой пример того, что я хочу сделать, потому что это проще объяснить.

1. У меня есть datatable, заполненный 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 в ваших рядах и использовать success функцию JQuery post, чтобы удалить строку.

код 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

Edit от комментариев:

Если вы используете fnDeleteRow, вы должны быть в состоянии сделать это строка id:

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