Как реализовать функцию выбора флажка для отправки электронных писем с использованием ajax / json?Если возможно

Question

У меня есть приложение MVC, которое использует dataTables и вызывает данные и флажок столбца через контроллер c #, а затем сценарии json / ajax в индексе таблицы .cshtml. Вероятно, это не самый эффективный способ, но я до сих пор заставлял его работать.

Если это возможно в json / ajax или jquery / javascript, как мне выбрать флажок, затем нажать кнопку, вызывающую модальное сообщение для отправки электронного письма, но вызывающую идентификаторы электронных писем в датабельной таблице из чека -боксы, поэтому мне не нужно вручную вводить адреса электронной почты, на которые отправляются электронные письма (только тема и тело письма). Если это невозможно, как мне это сделать?

HTML для столбцов

<div style="width:90%; margin:0 auto" class="tablecontainer">
<a class="popup btn btn-primary" href="/CRUD/save/0" style="margin- 
bottom:20px; margin-top:20px;">Add New Volunteer</a>
<table id="myDatatable">
<thead>
<tr>
<th><input type="checkbox" name="select_all" value="1" id="example-select-all"></th>
<th>Email</th>
<th>Password</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
<th>Credentials</th>
<th>Availability</th>
<th>Edit</th>
<th>Delete</th>

</tr>
</thead>
</table>
</div>

Пример AJAX / JSON

<script>
$(document).ready(function () {
var oTable = $('#myDatatable').DataTable({
"ajax": {
"url": '/CRUD/GetEmployees',
"type": "get",
"datatype": "json"
},

"columns":
[
{"data": "empty"},
{ "data": "EmailID", "autoWidth": true },
{ "data": "Password", "autoWidth": true },
{ "data": "FirstName", "autoWidth": true },
{ "data": "LastName", "autoWidth": true },
{ "data": "PhoneNumber", "autoWidth": true },
{ "data": "UserAddress", "autoWidth": true },
{ "data": "UserCity", "autoWidth": true },
{ "data": "UserState", "autoWidth": true },
{ "data": "UserZip", "autoWidth": true },
{ "data": "UserCredentials", "autoWidth": true },
{ "data": "UserDate", "autoWidth": true },
{"data": "UserID", "width": "50px", "render": function (data) {
return '<a class="popup" href="/CRUD/save/'+ data + '">Edit</a>';}
},
{
"data": "UserID", "width": "50px", "render": function (data) {
return '<a class="popup" href="/CRUD/delete/' + data + '">Delete</a>';
}}],
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + 
$('<div/>').text(data).html() + '">';}}]})

// more code here for modal on clicks for edit and delete views //

</script>

Вот пример фото того, как оно должно выглядеть. У меня есть таблица данных, мне просто нужна функциональность кнопки и клик.

Answer 1

Я думаю, вам нужно использовать -

table.rows ('. Selected'). Data ()

 var table = $('#example').DataTable();
  var emailbox=$("#emailBox");
  emailbox.val('');
  console.log(table.rows('.selected').data());
  var selectedData=table.rows('.selected').data();
  var emails = $.map(selectedData, function (item) { return item[2] });
  console.log(emails);
  for(var i=0;i<emails.length;i++){
         if(i==0){
             emailbox.val(v);
         }
         else{
           emailbox.val(emailbox.val()+";"+ v);
         }
  }
  $.each(emails,function(k,v){
        emailbox.val(emailbox.val()+v);
  })

Вы можете увидеть рабочий пример здесь .