I have a table for loading data and i wrote a code which assigns each table an href with javascript since the serverside enabled i can't assign each td a href. Therefore, each time page changes or search query invoked i need to assign href to client side table rows.

Here is what i put so far:

function assign_href_to_tables() {
console.log("Run assign_href_to_tables");
   // access all td variables when serverside enabled.
  $('#table').on( 'order.dt', function () {
      var table_rows = $('#table').find('tbody tr');
      console.log(table_rows)
      // scan through table rows and assign onclick event to each row.
      table_rows.each(function(index, element) {
        $(this).click(function() {
          var id = $(this).find('td:nth-child(1)').text();
          // reidrect to the edit page with the id of the clicked row
          window.document.location = '/detail/' + id;
        });
      });
    } );

  
}

I invoke the assign_href_to_tables function in initComplete e.g.:

"initComplete": function( settings, json ) {
        assign_href_to_tables();
      },

If i call the function on document ready it will affect only the first page. When page changes or search request queried href stops working.

I tried to follow this link but i did not understand it nor i could implement it.

As long as i understand, the problem arise initComplete does not wait for the table data to load. I don't know what is missing in my work. Thank you.