Question

我有一个动态创建的数据表，使用jQuery数据表，服务器端处理ajax和JSON。实际上我想出了如何使用mRender为每一行添加一个下拉列表。现在ich有下一个问题。如果用户点击下拉选项，例如“编辑”，我需要

从下拉列表中的id行获取“ID”的值并且
将其传递给servlet

我该怎么做？如何在我的下拉按钮中添加eventlistener？（对不起，我是jQuery和JS的新手）

这是数据表的代码

<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>

由于

编辑：错误的屏幕截图

第一个错误是，当我尝试获取混合字符（唯一ID）的id时，第二个错误是如果我尝试获取仅包含一个数字的测试ID，如“1”

编辑：

Answer 1

我想你可以这样试试。

<li><a href="#" onclick="return Edit('+full.id+')">Edit</a></li>

而不是像这样编写javascript函数

function Edit(id) //here you will get id of your row
{
   //here is your ajax call for servlet or any other code
}

试试这个：

<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>

如何从jquery数据表中的单元格中获取值，单击行内的下拉列表

1 个答案: