jquery-Datentabelle zeigt nur angeforderte Seiten/Zeilen an. Brauchen Sie eine dynamisch erstellte Schaltfläche zu erreichen

Question

Ich habe versucht, eine Lösung dafür zu finden, aber nichts, was ich versucht habe, scheint zu funktionieren. Wenn jemand Ideen hat, die toll wären :)

Ich render eine Schaltfläche für die letzte td jeder Zeile, um zu bestätigen, dass die Zeile angezeigt wurde. Wenn ich geklickt habe, mache ich einige serverseitige Sachen, aber ich ändere auch die Farbe und mache ein anderes Styling für diese Schaltfläche, füge Tooltips hinzu und alles funktioniert soweit. Jedoch habe ich eine andere Taste, um "alles zu bestätigen", als Standard-Initload zu DT ist 200 Zeilen, die Sie vielleicht alle nur als angezeigt ablehnen möchten. Hier fängt mein Problem an, ich kann nur scheinbar die Zeilen bearbeiten, die ich gerade betrachte. Wenn ich die Seite in der Tabelle ändere, wird die Schaltfläche "Vorquittiert" angezeigt.

Alle Daten (ohne die th-Tags) stammen von einem signalR-Client, den ich in einem Javascript-Array speichern und an die Tabelle init übergeben werde.

das ist Javascript für die Schaltfläche (quittieren alle) klicken:

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

Dies ist die HTML, wo ich den Knopf haben:

<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> 

und dies ist in der Spalte Rendering auf int DT (die Spalte „Aktion“):

{ 
      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

Es scheint, das Problem war, dass ich nicht mit die eingebauten Methoden des Iterierens durch die Elemente, während ich plain Javascript verwendete, um eine HTML-Sammlung der Knöpfe zu sammeln. dieser Code

arbeitet:

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