如何在Jquery数据表中添加带有参数的href调用javascript函数的链接？答案

【问题标题】：How to add link with href calling javascript function with parameter in Jquery datatables?如何在Jquery数据表中添加带有参数的href调用javascript函数的链接？
【发布时间】：2020-03-05 01:58:37
【问题描述】：

我想从数据表列中调用editEmployee / deleteEmployee函数编辑/删除带有参数empId值的链接。

如何在从编辑和删除链接调用的 editEmployee/deleteEmployee 函数中传递 empId 列值。

下面是我的javascript代码：

table = $('#employeesTable').DataTable(
                {
                    "sAjaxSource" : "/SpringDemo/employees",
                    "sAjaxDataProp" : "",
                    "order" : [ [ 0, "asc" ] ],
                    "aoColumns" : [
                            {
                                "className": "dt-center",
                                "sClass" : "center",
                                "mData" : "empId"
                            },
                            {
                                "orderable": false,
                                data: null,
                                className: "dt-center",
                                defaultContent: '<a href="javascript:editEmployee(empId);" class="glyphicon glyphicon-pencil text-primary"></a>'
                            } ,
                            {
                                "orderable": false,
                                data: null,
                                className: "dt-center",
                                defaultContent: '<a href="javascript:deleteEmployee(empId);" class="glyphicon glyphicon-remove text-danger"></a>'
                            } ]
                })

【问题讨论】：

你能做个小提琴吗
jsfiddle.net/8m21q69e

标签： javascript jquery ajax spring-mvc datatables

【解决方案1】：

table = $('#employeesTable').DataTable(
{
    "sAjaxSource" : "/SpringDemo/employees",
    "sAjaxDataProp" : "",
    "order" : [ [ 0, "asc" ] ],
    "aoColumns" : [
            {
                "className": "dt-center",
                "sClass" : "center",
                "mData" : "empId"
            },
            {
                "orderable": false,
                data: null,
                className: "dt-center",
                defaultContent: '<a data-emp_id="[add emp id value here]" class="glyphicon glyphicon-pencil text-primary edit-link"></a>'
            } ,
            {
                "orderable": false,
                data: null,
                className: "dt-center",
                defaultContent: '<a data-emp_id="[add emp id value here]" class="glyphicon glyphicon-remove text-danger delete-link"></a>'
            } ]
})

 $('.edit-link').on('click', function () {
  var empid= $(this).data('emp_id')
  window.location.href="edit url ";
  });

 $('.delete-link').on('click', function () {
   var empid= $(this).data('emp_id')
   window.location.href="delete url ";
 });

基本上，您需要根据类为每个事件设置 onclick 事件。然后获取存储在已单击按钮的 data-emp_id 属性中的 empID，然后适当地重定向

【讨论】：

【解决方案2】：

感谢大家的评论。

我已经通过将 id 存储在隐藏输入中并像这样在编辑中访问它来解决问题。

$(document).on('click', '#employeesTable tr', function(e) {
    var row_object = table.row(this).data();
    $("#hdnID").val(row_object.empId);
});

function editEmployee() {
    $.ajax({
        url : 'edit/' + $("#hdnID").val(),
        type : 'GET',
        success : function(result) {
            // Do something with the result
        }
    });
}

【讨论】：