Question

我在这里尝试：我有一个执行ajax请求的函数，并获取数据以填充DataTable。在我的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>

这是我在数据表中按下超链接EDIT按钮时得到的结果。

Answer 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>';
                                        }
                                    }
                                ]
                            });
                        }
                    });
                }

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

1 个答案: