[英]Jquery datatable get row id from button click
我的數據表中的每一行都有兩個按鈕,編輯和刪除。 是否可以在“刪除”或“編輯”按鈕上單擊並獲取員工的ID或行ID,並將其傳遞給web方法,該方法采用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]
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();
}
謝謝!
是的,您可以在點擊按鈕時獲得員工的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());
}
您應該使用.attr()
方法來查找id
屬性。
$('#datatable').on('click', 'button.deleteButton', function () {
var id = $(this).attr('id');
});
$('#datatable').on('click', 'button.editButton', function () {
var id = $(this).attr('id');
});
數據表
{
'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>'
}
}
這是可能的我知道三種方式。
1個壞方法:為backEnd輸入數據,例如缺點短路和搜索...功能已禁用。 額外的回應。
<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關於渲染函數go javascript方法參數行id的例子
render': function (data, type, row) {
return '<a onclick="javascript:foo('+ row.id +')"></a>'
}
3我最喜歡的direck jquery事件監聽器獲取行數據優點:清除html,沒有內聯函數調用和所有函數相同的文件調用。
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();
});
您應該將data-id添加到按鈕,如下所示:
'<button data-id="' + row.id + '" id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'
其他按鈕相同,然后單擊:
var id = $(this).data('id');
這會帶來你的身份證明
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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.