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

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

lovertech496lovertech496 Posts: 18Questions: 4Answers: 0
edited April 2023 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • lovertech496lovertech496 Posts: 18Questions: 4Answers: 0

    @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

  • lovertech496lovertech496 Posts: 18Questions: 4Answers: 0

    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

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin
    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

  • lovertech496lovertech496 Posts: 18Questions: 4Answers: 0

    Awesome !!!!

Sign In or Register to comment.