通过动态创建的按钮访问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>

你能提供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，这可能会破坏你的代码。

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

通过动态创建的按钮访问jquery中的Datatable内容点击

相关推荐