jQuery的数据表中获取行ID单击

我有我的数据表，编辑和删除的每一行呈现两个按钮。是否有可能通过删除或编辑按钮单击获取员工的ID或行ID，并让它将该ID值传入webmethod中，我拥有一个ID参数以删除数据库中的记录？jQuery的数据表中获取行ID单击

我的jQuery代码至今：

$(document).ready(function() { 
     $.support.cors = true; 
     $.ajax({ 
      url: '<%=ResolveUrl("GetEmployee.aspx") %>', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (data) { 
       var table = $('#datatable').dataTable({ 
        data: data, 
        columns: [ 
         { 'data': 'Id' }, 
         { 'data': 'image' }, 
         { 'data': 'lastName' }, 
         { 'data': 'firstName' }, 
         { 'data': 'jobTitle' }, 
         { 
          'data': 'StartDate', 
          'render': function (jsonDate) { 
           var date = new Date(parseInt(jsonDate.substr(6))); 
           var month = date.getMonth() + 1; 
           return date.getDate() + "/" + month + "/" + date.getFullYear(); 
          } 
         }, 
         { 
          'data': 'EndDate', 
          'render': function (jsonDate) { 
           var date = new Date(parseInt(jsonDate.substr(6))); 
           var month = date.getMonth() + 1; 
           return date.getDate() + "/" + month + "/" + date.getFullYear(); 
          } 
         }, 
         { 
          'data': null, 
          'render': function (data, type, row) { 
           return '<button id="' + row.id +'" onclick="editClick()">Edit</button>' 
          } 
         }, 
         { 
          'data': null, 
          'render': function (data, type, row) { 
           return '<button id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>' 
          } 
         } 
        ] 
       }); 
      } 
     }); 

     $('#datatable').on('click', 'button', function() { 
      var id = $(this).data(); 
      //var id = table.row($(this)).data(); 
      alert(JSON.stringify(id)); 
     }); 
    });

现在它给我回一个未定义的，当我试图抓住的ID。

我的WebMethod：

[WebMethod] 
    public static void DeleteRecord(string id) 
    { 
     var query = "DELETE FROM employee WHERE ID=?"; 
     OdbcConnection myConn = new OdbcConnection(myConnection); 
     OdbcTransaction transaction = null; 
     myConn.Open(); 

     transaction = myConn.BeginTransaction(); 
     OdbcCommand command = new OdbcCommand(query, myConn, transaction); 
     command.Parameters.Add("ID", OdbcType.Int).Value = id; 
     command.ExecuteNonQuery(); 

     transaction.Commit(); 

     myConn.Close(); 
    }

谢谢！

来源

2017-02-09 SC.Cee

是的，您可以在点击按钮时获得员工的ID或行ID。为此，您需要在定义编辑和删除按钮时执行一些较小的更改。

{ 
    'data': null, 
    'render': function (data, type, row) { 
        return '<button id="' + row.id +'" onclick="editClick(this)">Edit</button>' 
       } 
}, 
{ 
    'data': null, 
    'render': function (data, type, row) { 
         return '<button id="' + row.id + '" class="dodo" onclick="deleteClick(this)">Delete</button>' 
       } 
}

的Javascript/jQuery的

function editClick (obj) { 
     var rowID = $(obj).attr('id'); 
     var employeeID = $(obj).closest('tr').find('td:first').html()); 
} 

function deleteClick (obj) { 
     var rowID = $(obj).attr('id'); 
     var employeeID = $(obj).closest('tr').find('td:first').html()); 
}

来源

2017-02-09 07:38:30 Prabhat

你可以更容易地使用'jquery'来做到这一点。 –

感谢您的回复和是的，可以完成，但在这里，OP只是想要一个解决方案来传递员工ID或行ID。所以，这是获得它的方法之一。休息是由OP选择合适的答案。 – Prabhat

@SuprabhatBiswal嘿，谢谢你的工作完美。我会接受这个答案，因为我尝试了其他方法，但这对我没有任何作用。感谢所有人的贡献。欣赏它。 –

您应该使用.attr()方法，以找出id属性。

$('#datatable').on('click', 'button.deleteButton', function() { 
     var id = $(this).attr('id'); 
}); 
$('#datatable').on('click', 'button.editButton', function() { 
     var id = $(this).attr('id'); 
});

的DataTable

{ 
     'data': null, 
     'render': function (data, type, row) { 
       return '<button id="' + row.id +'" class="editButton">Edit</button>' 
     } 
}, 
{ 
     'data': null, 
     'render': function (data, type, row) { 
      return '<button id="' + row.id + '" class="deleteButton" >Delete</button>' 
     } 
}

来源

2017-02-09 07:29:39

嗨，是的，我试过这种方式，当我做了警报，它给了我未定义。 –

另外，你是否删除'deleteClick（）'和'editClick（）'？ –

啊，不，我没有。你必须删除这些？编辑：删除onclicks仍然无法正常工作？ –

你应该数据ID添加到一个按钮，这样的：

'<button data-id="' + row.id + '" id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'

同其他按钮，然后点击：

var id = $(this).data('id');

这会带来你的Id

来源

2017-02-09 07:33:00

Just Get Row and its first parameter is your id and pass it into your deleteclick function 

{ 
     'data': null, 
      'render': function (data, type, row) 
      { 
       var id = row.id; 
       return '<button id="' + row.id + '" class="dodo" onclick="deleteClick("' + id + '")">Delete</button>' 
      } 
} 

function deleteClick(var id) 
{ 
     alert(id); 
}

来源

2017-02-09 07:35:13

这是可能的，我知道三种方式。

1糟糕的方式：去数据后端例如缺点短路和搜索......功能无效。额外的回应。

<a data-id="<?=yourQueryResult["id"]?>" onclick="javascript:foo()"></a> 
function foo(){ var id = $(this)attr("data-id")}

或

<a onclick="javascript:foo(<?=yourQueryResult["id"]?>)"></a> 
function foo(id){ /*deleting*/}

2上渲染功能去JavaScript方法参数的行ID 例如

render': function (data, type, row) { 
        return '<a onclick="javascript:foo('+ row.id +')"></a>' 
       }

3我favoritte direck jQuery的事件监听器来获得行数据优势：干净的HTML，没有内联函数调用和你所有的功能n相同的文件调用。

var table = $('#datatable').dataTable({...}) 

$('#datatable tbody').on('click', 'a.delete', function() { 
      var tr = $(this).closest('tr'); 
      var row = table.row(tr); 
      var id = row.data().yourColumnName; 
     }); 
$('#datatable tbody').on('click', 'a.edit', function() { 
       var tr = $(this).closest('tr'); 
       var row = table.row(tr); 
       var rowData = row.data(); 
      });

来源

2017-02-09 07:59:23 Qh0stM4N

jQuery的数据表中获取行ID单击

回答

相关问题