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

回答

相關問題