title: add button to datatable row dynamically
body: <p>I have a problem when adding a custom bit of HTML to a datatable cell on loading.</p>
  
  <p>on clicking the tab to open the page, I call on a ajax function to fetch the data.</p>
  
  <blockquote>
  <pre><code>// CLICK on the tab to open the User Manager -&gt; Load all records into DataTable
      $("#admin_details").click(function(){
          // Send through the function to perform in the $_GET variable
          $.ajax({
              url: './inc/AdminScripts.php?argument=loadAllRecords'
          })
              .done(function(html) {
                  var t = $('#users_table').DataTable();
                  t.clear();
                  var obj = eval(html);
  
                  // ADD acquired data items to the DataTable
                  $.each(obj, function(key,value) {
                      t.row.add( [
                          value.edit,
                          value.name,
                          value.surname,
                          value.username,
                          value.email,
                          value.language,
                          value.securityQuestion,
                          value.securityAnswer,
                          value.administrator,
                          value.status,
                          value.id
                      ] ).draw();
                  });
                  addBellsWhistles();
              })
      });
  </code></pre>
  </blockquote>
  
  <p>This bit works fine and I get all the data I require. The problem now is that for the <code>EDIT</code> column I want to add a <code>ICON BUTTON</code> to click on to edit the record. I do so using a function <code>addBellsWhistles</code> like this</p>
  
  <blockquote>
  <pre><code>    function addBellsWhistles(){
          $('#users_table tr').children("td:nth-child(1)").append("&lt;div class='col1d'&gt;&lt;button class='editBut'&gt;&lt;img src='img/property32.png'&gt;&lt;/button&gt;&lt;/div&gt;");
      }
  </code></pre>
  </blockquote>
  
  <p>okay, this also work almost perfectly except for one thing. The data table only shows 10 records per page, so when I go to the 2nd or nth page the piece of custom added HTML is not visable. </p>
  
  <p>I have tried the following on click of the paginate button (well quite a few things including the the <code>class</code> of the button, <code>id</code> of the button, the <code>a tag</code> of the button) but nothing works.</p>
  
  <p>Im also using <code>deligation</code> in this case because of dynamically created data</p>
  
  <p>e.g.</p>
  
  <blockquote>
  <pre><code>    $( ".dataTables_paginate a" ).on( 'click', '.paginate_button', function () {
          console.log('paging');
          $(".confirmUploadError .confirm_text").html("Loading records. Please wait.");
          $(".confirmUploadError").fadeIn(250).delay(300).fadeOut(650);
          addBellsWhistles();
      });
  </code></pre>
  </blockquote>
  
  <p>its not writing to console, its not calling the message pop-up and it is especially not calling my function (and I just named them separately for dramatic effect).</p>
  
  <p>Anyone out there have a idea for me please?</p>
  
  <p>PS here is the datatable paginate container as created by datatables</p>
  
  <blockquote>
  <pre><code>       &lt;div class="dataTables_paginate paging_simple_numbers" id="users_table_paginate"&gt;
             &lt;a class="paginate_button previous disabled" aria-controls="users_table" data-dt-idx="0" tabindex="0" id="users_table_previous"&gt;Previous&lt;/a&gt;
                 &lt;span&gt;
                     &lt;a class="paginate_button current" aria-controls="users_table" data-dt-idx="1" tabindex="0"&gt;1&lt;/a&gt;
                     &lt;a class="paginate_button " aria-controls="users_table" data-dt-idx="2" tabindex="0"&gt;2&lt;/a&gt;
                 &lt;/span&gt;
             &lt;a class="paginate_button next" aria-controls="users_table" data-dt-idx="3" tabindex="0" id="users_table_next"&gt;Next&lt;/a&gt;
         &lt;/div&gt;
  </code></pre>
  </blockquote>