Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023

  Yes - you have DataTables configured to display only 200 rows at a time (or thereabouts). Therefore:

  $("#example a[href*='.m4a']").mb_miniPlayer();
  

  will only pick those 200 rows.

  Either use createdRow to built the player on each row, or draw / drawCallback to initialise the player on the rows as they are drawn.

  Allan
• lovertech496 Posts: 18Questions: 4Answers: 0

  April 2023

  @Allan can you please help me with a code for a single row so that i will fix for all. I couldn't understand where i need to fix or what code should write. Please help me for a single <tr>.....<td>... <tr>

  <script>
  $(document).ready(function() {
          var data = [];
  
              //data.push( [ i, i, i, i, i ] );
              data.push(['<td style="color:black">2</td>', '<td style="color:black">2 </td>', '<td style="color:black">sample </td>', '<td><a class="audio {skin:\'blue\', showTime:false, showMute:false,downloadable:true}"  href="sample.mp3"></a></td>', '<td><a class="audio {skin:\'green\', showTime:false, showMute:false, downloadable:true}"  href="sample.mp3"></a></td>']);
              data.push(['<td style="color:black">2</td>', '<td style="color:black">2 </td>', '<td style="color:black">sample </td>', '<td><a class="audio {skin:\'blue\', showTime:false, showMute:false,downloadable:true}"  href="sample.mp3"></a></td>', '<td><a class="audio {skin:\'green\', showTime:false, showMute:false, downloadable:true}"  href="sample.mp3"></a></td>']);
  
          $('#example').DataTable( {
              data:           data,
              deferRender:    true,
              scrollY:        800,
              scrollCollapse: true,
              scroller:       true
          } );
      } );
  </script> 
  

  Thanks
• lovertech496 Posts: 18Questions: 4Answers: 0

  April 2023

  Also, i would like to know where the DataTables has been configured to display only 200 rows at a time? I didn't explicitly mention. Please help me with the exact code which causes this issue
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023 Answer ✓

  Try adding this to your DataTables initialisation object:

  createdRow: function (row) {
    $("a[href*='.m4a']", row).mb_miniPlayer();
  }
  

  Also, i would like to know where the DataTables has been configured to display only 200 rows at a time?

  The number of rows to display is automatically computed by scroller: true based on its buffer zone configuration and the height of the scrolling viewport. That isn't a bug, it is intentional if you are using Scroller.

  Since you are initialising a music player I would strongly recommend you removing scrolling and use paging of about 10 rows. You might notice on your page at the moment that there is a serious performance issue (Firefox stalls for me) because the music player is initialising on so many elements.

  Allan
• lovertech496 Posts: 18Questions: 4Answers: 0

  April 2023

  Awesome !!!!