How to re-render column on page change?

InnovaMatt

In numerous parts of the system I'm developing I have DataTables with edit & delete links inside them. These open a modal, which populates itself with the select entities data by retrieving it from the click links HTML data values.

Initially I created these links with data tags populated by PHP on page load. While they worked fine on the first page of the DataTable, it took me a while to discover (particularly because the change isn't reflected in Chrome's Developer tools) that during DataTables pagination process, it removed all the attached data tags for the link, stopping the process from working from the second page onwards.

I've just spent some time instead using the DataTable column render function to work around this (also involved splitting a Name column into FName & SName in the PHP and rendering it within the DataTable):

"columnDefs": [
    {
          "render": function ( data, type, row ) {
               return data + ' ' + row[2];
          },
         "targets": 1
    },
    {
         "targets": [6],
         "render": function (data, type, row) {
              data = "<span data-toggle='tooltip' title='Edit'>" +
             "<a class='iconlink editcntct' data-toggle='modal' data-target='#mdl_contact' data-conid='" + row[0] + "' data-fname='" + row[1] + "' data-lname='" + row[2] + "' data-role='" + row[3] + "' data-tel='" + row[4] + "' data-email='" + row[5] + "' data-mode='Edit'>" +
                   "<i class='fas fa-edit'></i>" +
              "</a>" +
         "</span>" +
         "&nbsp;&nbsp;" +
         "<a data-toggle='tooltip' title='Delete' class='iconlink supcondel' href='sup.php?v_id=" + supID + "&dc=" + row[0] + "'> +
              "<i class='fas fa-trash-alt'></i>" +
         "</a>";
         return data;
         }
    },
    {
        "targets": [0,2],
        "visible": false
    },
    {
        "orderable": false, "targets": "no-sort"
     }
],

However, again I'm finding the situation of it working correctly on the first page of results, but not the second onwards (the pagnation occurs after the column rendering)

Am I able to force the column to be re-rendered on page switch or is there some other option?

Very grateful for any advice you can offer.

kthorngren

Take a look at the My events don't work on the second page FAQ. Sounds like you need to implement jQuery Delegated Events

Kevin

InnovaMatt

Thanks, kthorngren. My bad for not checking the FAQ.