jquery datatable только отображает запрашиваемые страницы/строки. Вам нужно создать динамически созданную кнопку

Question

Я пытался найти решение для этого, но ничего, что я пробовал, похоже, работает. Если у кого-то есть какие-то идеи, которые бы здорово :)

Я показываю кнопку для последнего td каждой строки, чтобы подтвердить, что строка была просмотрена. Когда я нажимал, я делаю некоторые вещи на сервере, но также меняю цвет и делаю некоторые другие стили для этой кнопки, добавляя всплывающие подсказки и так далее, и все работает отлично. Однако у меня есть еще одна кнопка «Подтвердить все», поскольку по умолчанию initload для DT - это 200 строк, которые вы можете просто удалить, если их просмотреть. это то, где начинается моя проблема, я могу только манипулировать строками, которые я просматриваю сейчас. Если я изменю страницу на таблице, появится «предварительно подтвержденная» кнопка.

все данные (не считая т-теги) поступают от клиента signalR, который я храню в массиве javascript и переходя к таблице в init.

это Javascript для кнопки (Подтвердить все) нажмите:

$('#eventTable thead').on('click', 'button', function (e) { 
    var buttons = document.getElementsByClassName('ackButton'); 
    for (var i = 0; i < buttons.length; i++) { 
     console.log(buttons[i]); 
     var ackButton = buttons[i]; 
     $(ackButton).addClass('acknowledgedEvent'); 
     $(ackButton).html("<i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged"); 
     $(ackButton).addClass('acknowledged'); 
     $(ackButton).css({ 'background-color': 'gainsboro', 'cursor': 'not-allowed', 'padding-left': '5px', 'padding-right': '5px' }); 
     $(ackButton).on('click', function (e) { 
      e.stopimmediatepropagation(); 
     }); 
    } 
}); 

это HTML, где у меня есть кнопка:

<thead> 
        <tr> 
         <th>Time</th> 
         <th>Date</th> 
         <th>Component</th> 
         <th>Severity Level</th> 
         <th>Type</th> 
         <th>Message</th> 
         <th>Actions<button id="ackAll" class="btn btn-danger btn-sm pull-right">All</button></th> 
        </tr> 
        </thead> 

и это в рендеринга столбца на INT DT (представляющая колонку «действие»):

{ 
      name: 'action', 
      "data": null, 
      "render": function(row, type, val, meta) { 
       if (row[7] === "false") { 
        columndata = 
         "<button class='btn pull-right ackButton' style='border-radius:24px;background-color: rgb(91, 192, 222);color:white;padding-left:10px;padding-right:10px;'><i class='fa fa-eye-slash' aria-hidden='true' style='margin-right: 7px;'></i>acknowledge</button><a class='ackInfoLink ackInfoLink-hidden pull-right' href='#ackCommentModal' style='visibility:hidden;' data-toggle='modal'><i class='fa fa-info-circle text-info fa-lg' aria-hidden='true'></i></a>"; 
       } else if (row[7] === "true") { 
        if (row[10] === "" || row[10] == null) { 
         columndata = 
          "<button class='btn acknowledgedEvent pull-right' style='border-radius:24px;background-color: gainsboro;color:white; cursor: not-allowed; padding-left:5px;padding-right:5px;'><i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged</button><a href='#ackCommentModal' class='ackInfoLink pull-right' style='visibility:hidden;' data-toggle='modal'><i class='fa fa-info-circle text-info fa-lg' aria-hidden='true'></i></a>"; 
        } else { 
         columndata = 
          "<button class='btn acknowledgedEvent pull-right' style='border-radius:24px;background-color: gainsboro;color:white; cursor: not-allowed; padding-left:5px;padding-right:5px;'><i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged</button><a href='#ackCommentModal' class='ackInfoLink pull-right' data-toggle='modal'><i class='fa fa-info-circle text-info fa-lg' aria-hidden='true'></i></a>"; 
        } 
        $('.acknowledgedEvent').tooltip({ 
         html: true, 
         title: '<strong><em>checked by </strong>' + row[9] + ',<br /> ' + row[8] + '</em>', 
         placement: 'bottom' 
        }); 

       } 
       return columndata; 
      }, 
      "defaultContent": columndata, 
      responsivePriority: 3 
     } 

Answer 1

Похоже, проблема заключалась в том, что я не использовал встроенные методы итерации через элементы, поскольку я использовал простой javascript для сбора html-коллекции кнопок.

этот код работает:

$('#eventTable thead').on('click', 'button', function (e) { 
    table.rows().nodes().each(function(tr) { 
     $(tr).find(".ackButton").each(function() { 
      $(this).html("<i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged"); 
      $(this).addClass('acknowledgedEvent'); 
      $(this).css({ 'background-color': 'gainsboro', 'cursor': 'not-allowed', 'padding-left': '5px', 'padding-right': '5px' }); 
      $(this).on('click', function (e) { 
       e.stopimmediatepropagation(); 
      }); 
     }); 
    }); 
});