通過動態創建的按鈕訪問jquery中的Datatable內容點擊

我是jquery的新手。當我按下擦除按鈕時，我需要訪問數據表內容。我嘗試了很多方法，但它返回undefined。提前致謝。通過動態創建的按鈕訪問jquery中的Datatable內容點擊

$(document).ready(function() { 
loadData()

}）;

功能loadData（）{

var table = $('#example').DataTable({ 

    "ajax" : { 
     "method" : 'POST', 
     "crossDomain" : true, 
     "dataType" : 'json', 
     "contentType" : 'application/x-www-form-urlencoded; charset=UTF-8', 
     "dataSrc" : "", 
     "url" : "http://localhost:8081/Lakshmi_Service/admin/full" 
    }, 

    "columns" : [ { 
     "data" : "adminName" 
    }, { 
     "data" : "address" 
    }, { 
     "data" : "emailId" 
    }, { 
     "data" : "otp" 
    }, { 
     "data" : "expiryDate" 
    }, { 
     "data" : "mobileNo" 
    }, { 
     "targets" : -1, 
     "data" : null, 
     "defaultContent" : '<button>Erase</button>' 
    } ], 

    "iDisplayLength" : 5, 
    "bAutoWidth" : true, 
    "bSort" : false, 
    "aLengthMenu" : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "All" ] ], 
    "bDestroy" : true, 
    "bFilter" : false, 
    "bLengthChange" : false 
}); 

$('#example tbody').on('click', 'button', function(event) { 
    var aData = table.fnGetPosition(this); 
    var oTableData = table.fnGetData(aData[0]); 
    var ids = oTableData[aData].adminName; 
    alert(ids); 
});

}

我需要當我點擊刪除按鈕來調用其他服務這一adminName值。我的頁面看起來像..

我的HTML頁面..

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="jquery-1.11.3.js"></script> 
 
<script 
 
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" language="javascript" 
 
\t src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 
 
<script type="text/javascript" language="javascript" 
 
\t src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script> 
 
<script src="jquery-ui.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" 
 
\t href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> 
 
<link rel="stylesheet" type="text/css" 
 
\t href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css"> 
 

 
<title>Guru Statistics</title> 
 
</head> 
 
<body> 
 
\t <table id="example" class="table table-striped table-bordered" 
 
\t \t cellspacing="0" width="60%"> 
 
\t \t <thead> 
 
\t \t \t <tr title="Name"> 
 
\t \t \t \t <th>Name</th> 
 
\t \t \t \t <th>address</th> 
 
\t \t \t \t <th>mailId</th> 
 
\t \t \t \t <th>otp</th> 
 
\t \t \t \t <th>Date</th> 
 
\t \t \t \t <th>Mobile No</th> 
 
\t \t \t \t <th>Erase</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t </table> 
 

 
\t <script type="text/javascript" src="home.js"></script> 
 
</body> 
 
</html>

來源

2015-11-03 chellapandi k

你能提供html嗎？還有，jsfiddle（或任何相同的）將不勝感激 – Enjoyted

@ Enjoyted sure。 –

你可以做的就是添加類的細胞（adminName，地址.. ）中的「列」（我使用aColumns）dataTables對象，然後在你的click事件中使用這塊jQuery事件

$(this).parents("tr").find(".adminName").text();

這種方式，你應該能夠讓你在

點擊該行的adminName的價值，如果你不希望添加的類（你應該！），你仍然可以得到你的數據這樣我想：

$(this).parents("tr").find("td").first().text();

但我鼓勵你這樣做，因爲如果有一天你決定添加一個新列多數民衆贊成adminName之前放置（說「ID」的爲例），你的代碼將檢索Id，而不是adminName，這可能會破壞你的代碼。

來源

2015-11-03 10:17:38 Enjoyted

感謝兄弟。有用！！！！ –

通過動態創建的按鈕訪問jquery中的Datatable內容點擊

回答

相關問題