2017-04-10 61 views
0

我已經閱讀了文檔,並且能夠在我的頁面上顯示該表格,但是如何使每行可點擊並使用GET請求,在點擊一行後將請求的數據發送到另一個頁面?我已經閱讀過其他問題,但似乎無法找到適合我的解決方案。這是我迄今爲止所擁有的。感謝您的幫助和努力!如何使Datatable行可點擊並使用GET請求並返回結果?

<table cellpadding="1" cellspacing="1" id="scroll"> 
<thead> 

     <th>Name</th> 
     <th>Address</th> 
     <th>Age</th> 

</thead> 
<tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Address</th> 
     <th>Age</th> 
    </tr> 
</tfoot> 
<tbody> 
    <tr> 
     <td> Placeholder1</td> 
     <td> Placeholder2</td> 
     <td> Placeholder3</td> 
    </tr> 
    <tr> 
     <td> Placeholder1</td> 
     <td> Placeholder2</td> 
     <td> Placeholder3</td> 
    </tr> 
    <tr> 
     <td> Placeholder1</td> 
     <td> Placeholder2</td> 
     <td> Placeholder3</td> 
    </tr> 
</tbody> 
</table> 



<script> 
$(document).ready(function(){ 
    var table = $('#scroll').dataTable({ "sPaginationType": "full_numbers" }); 


    $('#scroll tbody').on('click', 'tbody tr', function(){ 
    var data = table.row(this).data(); 
    console.log(data); 
    }) 
}); 

+1

只是看看[**這**](https://datatables.net/examples/advanced_init/events_live.html) – mmushtaq

+0

哦,我沒有看到這一點,我只是試過這個,仍然沒有能夠點擊行。 – Carbon

+0

我嘗試使用cdn並導入它要求的javascript,並且我的表格也不再顯示。 – Carbon

回答

0

我發現mmushtaq鏈接文檔以完成我所需要的工作。這使得行可以點擊。謝謝

1

JQUERY部分:

$(document).off("click", "#scroll tbody tr").on("click", "#scroll tbody tr", function(){ 
    var i = 0; 
    var query = ""; 
    $(this).find("td").each(function(){ 
     query += "columns[" + i++ + "]=" + $(this).text + "&"; 
    }) 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: query, 
     success: function(){ 
     alert ("Successfully sent"); 
     } 
    }) 
}) 

PHP部分(script.php的)

<?php 
    $columns = $_POST["columns"]; 
    foreach ($columns as $index => $value) 
    { 
    // do something with column # $index and text value is $value 
    } 
?> 
+0

由於某些原因,應用此代碼,行仍不可點擊。 – Carbon

+0

?? ('click','tbody tr',function(){'...'$(document).off(「#scroll tbody tr」,「click」 )'沒有多大意義,爲什麼要將非現有事件關閉? – davidkonrad

+0

我之前總是關閉事件,只是一種習慣 – diavolic

0
var data = table.row(this).data(); 

這返回行對象,所以你需要改變 console.log(data);console.log(data[0] + " " + data[1] + " " + data[2]);

+0

我試過了,它也不適用於我,但仍然無法點擊該行並獲得警報。 – Carbon

相關問題