CODEWITHSUNDEEP
datatables-1.10
cecsil
cecsil

Reputation: 59

jquery datatable only renders requested page/rows. Need to reach a dynamincally created button

I've been trying to find a solution for this but nothing I've tried seems to work. If someone has any ideas that would be great :)

I'm rendering a button for the last td of each row to acknowledge that the row has been viewd. When clicked I'm doing some serverside stuff, and everything works fine so far. However I have another button to "Acknowledge All", as default initload to DT is 200 rows you might just want to dismiss them all as viewed. this is where my problem starts , I can only seem to manipulate the rows I'm currently viewing. If I change the page on table the "pre-acknowledged" button is presented.

this is the code for the button (acknowledge all) click:

$('#ackAll').on('click', function () {
    var buttons = $('.ackButton');
    $(buttons).each(function() {
        $(this).html("<i class='fa fa-eye acknowledged' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged")
               .on('click', function (e) {
                    e.stopImmediatePropagation();
                });
    }
});

this is the html where I have the button:

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

and this is in the column rendering on int DT (representing "action" column):

{
  name: 'action',
  data: null,
  render: function(row, type, val, meta) {
                if (row[10]) {
                    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>";
                }
               return columndata;
  },
  defaultContent: columndata,
  responsivePriority: 3
}

Upvotes: 2

Views: 88

Answers (1)

cecsil
cecsil

Reputation: 59

It seems the problem was that I wasn't using DT's built-in methods of iterating through the elements in the table.

this works:

$('#ackAll').on('click', function (e) {
    table.rows().nodes().each(function(tr) {
        $(tr).find(".ackButton").each(function () {
              $(this).html("<i class='fa fa-eye acknowledged' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged")
               .on('click', function (e) {
                    e.stopImmediatePropagation();
                });

Upvotes: 1

Related Questions