JQuery DataTables - 后刷新表数据 - ColdFusion

我发布了一个非常简单的例子，我想做什么，因为它更容易解释这种方式。JQuery DataTables - 后刷新表数据 - ColdFusion

我有一个填充了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>

来源

2014-04-09 madvora

听起来就像要刷新包含数据表的div。谷歌搜索“coldfusion刷新div”应该给你看看。 –

好的，我确实找到了一种在帖子后删除客户端上的行的方法。我可以在$ .post行后添加... 'code ........ var row = $（this）.closest（“tr”）。get（0）; table1.fnDeleteRow（table1.fnGetPosition（行））; ' 但是，我不认为这是做到这一点的正确方法。我知道我真的应该用某种方式来使用Ajax，而不是发布到操作页面 – madvora

你写的删除行的方式是我过去如何做到的。 – abbottmw

添加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：

如果使用fnDeleteRow，你应该能够在做到这一点：从评论

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

jquery .post documentation

编辑行ID：

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

来源

2014-04-10 00:58:48

是的，这有效。谢谢。我唯一担心的是我希望数据表总是显示填充查询的结果，所以如果我发布更改，操作页面会删除一条记录，并且我希望数据表显示当前的结果查询（与重新加载页面时会发生的情况相同），但没有删除表中行的屏幕显示的代码。原因是因为我将与查询填充的另一个表执行相同的操作，该查询将显示新增数据而不是删除已删除的数据。 – madvora

从我读过的内容来看，我认为这需要调用另一个页面的ajax来显示数组中的数据。就是那个被刷新的数组。我很难弄清楚如何做到这一点。 – madvora

只是注意到.remove（）不适用于数据表，因为它不更新计数。使用fnDeleteRow将做到这一点。 – madvora

JQuery DataTables - 后刷新表数据 - ColdFusion

回答

相关问题