JQuery datatable получить идентификатор строки с помощью кнопки

Question

У меня есть две кнопки, отображаемые в каждой строке в моем datatable, Edit и Delete. Можно ли захватить идентификатор сотрудника или идентификатор строки на кнопке «Удалить» или «Изменить» и передать это значение идентификатора в веб-метод, который у меня есть, который принимает параметр 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)); 
     }); 
    }); 

Сейчас его возвращение мое неопределенное, когда я пытаюсь захватить идентификатор.

Мой 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(); 
    } 

Спасибо!

Answer 1

Да, вы можете получить идентификатор сотрудника или идентификатор строки при нажатии кнопки. Для этого вам нужно выполнить некоторые незначительные изменения при определении кнопки редактирования и удаления.

{ 
    '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()); 
} 

Answer 2

Вы должны использовать метод .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>' 
     } 
} 

Answer 3

Вы должны добавить данные идентификатор к кнопке, как это:

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

же для другой кнопки, а затем по щелчку:

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

это приведет к вашему Id

Answer 4

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); 
} 

Answer 5

это возможно, я знаю три способа.

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 на визуализации функции перейти JavaScript параметры метода идентификатор строки пример

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

3 Мой favoritte слушателя direck JQuery событий, чтобы получить строки данных Преимущества : clean 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(); 
      });