200 Rows Only Populated Successfully Out of 1,200 rows push

lovertech496

Hi,

I rendered huge rows using (https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html)

https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html

However only 200 rows shows mp3 player (https://github.com/pupunzi/jquery.mb.miniAudioPlayer in a datatable) in 2 columns but remaining doesn't of 1,200 rows

Attached the file for your kind reference

https://filebin.net/1nkbpfo91jfa4l5s
https://file.io/qUFgQcbcxWNe

Could you please let me know which setting needs to be changed/added ?

Thank you in advance.

allan

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

@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

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

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

Awesome !!!!