简体   繁体   中英

How do i get a value from a cell in jquery datatables clicking on dropdown inside a row

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

  1. to get the value of "ID" from id row in wich the dropdown is in and
  2. pass it to a servlet

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

EDIT: Screenshot of errors 错误的屏幕截图

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"

EDIT: 新错误

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM