I have a dynamically created datatable using jQuery data tables with serverside processing with ajax and JSON. Actually i figured out how to add a dropdown to each row using mRender. Now ich have the next problem. If the user click on one off the dropdown options like "edit" i need
How can i do this? And how can I add a eventlistener to my dropdown buttons? (Sorry, I'am new in jQuery and JS)
This is the code of datatable
<script type="text/javascript">
$(document).ready(function(){
var ctx = "${pageContext.request.contextPath}";
var oTable = $('#usertable').dataTable(
{"processing":true,
sAjaxDataProp: "",
"ajax": {
"url": ctx+"/fetchuser",`
"type": "GET"
},
"aoColumns": [
{ "mData": "id" },
{ "mData": "senderFullName" },
{ "mData":"userName" },
{ "mData": "userLastLogin" },
{ "mRender":
function(data, type, full) {
return '<div class="dropdown">'+'<button class="btn btn-default dropdown-toggle" type="button"data-toggle="dropdown">Actions'+
'<span class="caret"></span></button>'+
'<ul class="dropdown-menu">'+
'<li><a href="#">Edit</a></li>'+
'<li><a href="#">Delete</a></li>'+
'<li><a href="#">Block</a></li>'+
'</ul>'+
'</div>'
},"bSortable" : false }
]
});
});
</script>
Thanks
The first error is, when i try to get the id of mixed characters (unique id) and the second if i try to get a test id containing only one number like "1"
I think you can try like this.
<li><a href="#" onclick="return Edit('+full.id+')">Edit</a></li>
And than write javascript function like this
function Edit(id) //here you will get id of your row
{
//here is your ajax call for servlet or any other code
}
Try this one :
<script type="text/javascript">
$(document).ready(function(){
var ctx = "${pageContext.request.contextPath}";
var oTable = $('#usertable').dataTable(
{"processing":true,
sAjaxDataProp: "",
"ajax": {
"url": ctx+"/fetchuser",`
"type": "GET"
},
"aoColumns": [
{ "mData": "id" },
{ "mData": "senderFullName" },
{ "mData":"userName" },
{ "mData": "userLastLogin" },
{ "mRender":
function(data, type, full) {
return '<div class="dropdown">'+'<button class="btn btn-default dropdown-toggle" type="button"data-toggle="dropdown">Actions'+
'<span class="caret"></span></button>'+
'<ul class="dropdown-menu">'+
'<li><a href="#" onclick="return Edit('+full.id+')">Edit</a></li>'+
'<li><a href="#">Delete</a></li>'+
'<li><a href="#">Block</a></li>'+
'</ul>'+
'</div>'
},"bSortable" : false }
]
});
});
function Edit(id) //here you will get id of your row
{
console.log(id);
//here is your ajax call for servlet or any other code
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.