从Datatable Jquery中的超链接传递参数答案

【问题标题】：Passing parameter from hyperlink in a Datatable Jquery从Datatable Jquery中的超链接传递参数
【发布时间】：2018-04-25 22:18:51
【问题描述】：

我在这里尝试什么：我有一个执行 ajax 请求并获取数据以填充 DataTable 的函数。在我的数据表中，我有列。当我单击编辑超链接时，我希望它将 UID 传递给名为 myfunction 的函数。但是当我再次单击 EDIT 超链接时它会爆炸，它只会在您按下超链接时爆炸，除了 DataTable 没有问题。（附图片）先感谢您。

我的数据表看起来像..

ResourceId ResourceLName FName  UID  Actions 
1           abc           xyx    21    EDIT(this is a hyperlink) 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
           <script src="script.js"></script>        
            <script src="Scripts/jquery-3.0.0.js"></script>
            <script src="Scripts/jquery-ui-1.12.1.js"></script>
            <script src="Scripts/jquery-ui-1.12.1.min.js"></script>
            <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
            <script src="Scripts/jquery.unobtrusive-ajax.min.js"></script>
            <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
            <script src="Scripts/DataTables/dataTables.jqueryui.js"></script>
            <link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />

    $(document).ready(function ()
 {
     function loadECWResourceInfo()
 {         
                    $.ajax({
                        url: 'GetResourceInfo_Json.asmx/GetResourceInfoTable',
                        method: 'post',
                        dataType: 'json',
                        success: function (data) {
                            $('#datatable').dataTable({
                                //Calling DataTable function                      
                                modal: true,                           
                                retrieve: true,
                                paging: true,
                                sort: true,
                                searching: true,
                                //scrollY: 600,  // this will change the 
                                data: data,   //pasing data 
                                columns: [   // passing column 
                                    { 'data': 'ResourceId' },                                   
                                    { 'data': 'ResourceLName' },
                                    { 'data': 'FName' },                                  
                                    { 'data': 'UID' },
                                    {                      

                                  "mRender": function (data, type, row) {
                                   var id = row.UID;
                                   return '<a href="#" onclick="myfunction("+ id +")>EDIT</a>';
                                        }
                                    }
                                ]
                            });
                        }
                    });
                }

//I want the href  onclick event to hit this function so i can do something.


  function myfunction(event)
           {
                var id = event.UID;
                alert("OK");
           }
}   

    </script>
</head>



//-------------HTML--------------------  

  <body>
<form id="form1" runat="server">
  <div style="width: auto; height: auto; border: 1px solid black; padding: 3px">

                    <table id="datatable" style="border-collapse: collapse" border="1">
                        <thead>
                            <tr>
                                <th>ResourceId</th>
                                <th>ResourceLName</th>
                                <th>FName</th>
                                <th>UID</th>                       
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>      
            </form>
        </body>
        </html>

这是我在我的数据表中按下超链接编辑按钮时得到的。

【问题讨论】：

标签： jquery

【解决方案1】：

我解决了这个问题，查看问题Uncaught ReferenceError: myFunction is not defined 主要问题是您从锚标记调用的函数..它需要在 document.ready 之外.. 不知道为什么但是一旦我将它放在 document.ready(function(){});有效。

<script type="text/javascript">
    function myFunction()
 {
       alert("You have called the function from a anchor tag inside a datatable. Make sure it is outside $document.Ready(function)")        
    }

     $(document).ready(function ()
 {
     function loadECWResourceInfo()
 {         
                    $.ajax({
                        url: 'GetResourceInfo_Json.asmx/GetResourceInfoTable',
                        method: 'post',
                        dataType: 'json',
                        success: function (data) {
                            $('#datatable').dataTable({
                                //Calling DataTable function                      
                                modal: true,                           
                                retrieve: true,
                                paging: true,
                                sort: true,
                                searching: true,
                                //scrollY: 600,  // this will change the 
                                data: data,   //pasing data 
                                columns: [   // passing column 
                                    { 'data': 'ResourceId' },                                   
                                    { 'data': 'ResourceLName' },
                                    { 'data': 'FName' },                                  
                                    { 'data': 'UID' },
                                    {                      

                                  "mRender": function (data, type, row) {
                                   var id = row.UID;
                                   return '<a href="#" onclick="myfunction("+ id +")>EDIT</a>';
                                        }
                                    }
                                ]
                            });
                        }
                    });
                }

【讨论】：

你有没有为你的解决方案提琴..面对同样的..跟着你的解决方案它不起作用。如果可能，请检查this