Answers

• rf1234 Posts: 3,000Questions: 87Answers: 421

  March 2020

  don't see your code, hard to tell.

  Reason might be that the element you are applying the class to doesn't exist in the dom yet at the time you are applying it.

  You might want to use an event for it to make sure the data table is ready when the class is being applied. "on init" could be the right one:
  https://datatables.net/reference/event/init
• kikloo Posts: 5Questions: 2Answers: 0

  March 2020 edited March 2020

  Hi,

  my code is following:

  <script>
  $(document).ready(function() {
      $('#tblProducts').DataTable({
          "pageLength": 50,
          "aoColumnDefs": [
              { 
                  'bSortable': false, 
                  'aTargets': [ 9,10,11 ] 
              }
          ],
          "bProcessing": true,
          "serverSide": true,
          "ajax":{
              url :"ssp-products.php", // json datasource
              type: "get"  // type of method  , by default would be get
          }
      });   
  
      $(".thickbox").colorbox({ width:"75%", height:"75%" });
      $(".ajax").colorbox();
  });         
  </script>
  

  Ajax sends this code for colorbox / thickbox link:

  <center><a class='thickbox' href='../pictures/" . $d . "'><i class='fa fa-picture-o' aria-hidden='true'></i></a> <input type='radio' name='pid' value=" . $d . " /></center>

  Can anyone please shed some light as to why thickbox / colorbox class is not applying where as font awesome is working fine ?

  Thanks.
• rf1234 Posts: 3,000Questions: 87Answers: 421

  March 2020

  Try with an event:

  <script>
  $(document).ready(function() {
      var table = $('#tblProducts').DataTable({
          "pageLength": 50,
          "aoColumnDefs": [
              {
                  'bSortable': false,
                  'aTargets': [ 9,10,11 ]
              }
          ],
          "bProcessing": true,
          "serverSide": true,
          "ajax":{
              url :"ssp-products.php", // json datasource
              type: "get"  // type of method  , by default would be get
          }
      });  
   
      table.on ('init', function () {
          $(".thickbox").colorbox({ width:"75%", height:"75%" });
          $(".ajax").colorbox();
      });
      
  });        
  </script>
  
• kikloo Posts: 5Questions: 2Answers: 0

  March 2020

  Hi,

  thanks it kind of works for only the 1st page in datatables, if i search for something or goto any other page then it is not working. Any suggestion ?

  Thanks.
• rf1234 Posts: 3,000Questions: 87Answers: 421

  March 2020 Answer ✓

  check the data tables event list and try some other events.
  Candidates to try would be "on preDraw" or "on draw". Maybe "on page". Easy to try it ...

  https://datatables.net/reference/event/

  https://datatables.net/reference/event/preDraw
  https://datatables.net/reference/event/draw
  https://datatables.net/reference/event/page
• kikloo Posts: 5Questions: 2Answers: 0

  March 2020

  Hi,

  draw event works fine.

  Thanks.