JQuery Datatable is too slow with image resources

Question

The used script of the plugin:

  <script src="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

I have a datatable with maximum 19K row of records. I am not using server side processing or AJAX, it is just the DOM. I tried migrating to server side processing, but it is very time consuming to implement all features all over again. it is all about the image resources that have been used per each record, as per my guess which makes the datatable slowest. It is working perfect on local though. The differences of local vs server are below.

LOCAL HOSTING

LIVE ON SERVER

The way the table is been implemented, the code block is below.

          var tableone= $('#tableX').DataTable({
          "scroller": true,
          "deferRender": true,
          "responsive": true,
          "order": [[1, 'asc']],  
          "paging": true, 
          "pageLength": 150,          
          "bFilter": false,
          "searching": true,
          "rowCallback": function( row, data, index ) {
            if ( data[9] == "MATCH COLUMN" )
            {
              $('td', row).css('background-color', '#b5b5de');
            }
            else if ( data[9] != "MATCH COLUMN" )
            {
              $('td', row).css('background-color', 'white');
            }
          },
          "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null; 
            api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                      '<tr class="group"><td class="delBack"colspan="14">'+'<strong> THIS SHOULD BE GROUPIFIED : '+group+'</strong></td></tr>'
                    );
                    last = group;
                }
            } );
          },
          "autoWidth": false,
          "aoColumnDefs": [{ "bSortable": false, "bSearchable": false, "aTargets": [2,4,5,6,7,8,9,10,11,12,13 ] } ],
          "aoColumns": [{ "sWidth": "5%" }, { "sWidth": "5%" },{ "sWidth": "2%" }, { "sWidth": "3%" },{ "sWidth": "2%" },{ "sWidth": "19%" },{ "sWidth": "10%" },{ "sWidth": "3%" },{ "sWidth": "3%" },{ "sWidth": "3%" },{ "sWidth": "15%" },{ "sWidth": "5%" },{ "sWidth": "15%" },{"sWidth":"15%"}]
          });

I am aware of the DOM, AJAX SOURCE and SSP. But It should be done through clientside and not server. What can be done to improve it's performance with an efficient way to retrieve images or resources if that is what been causing the excessive load. Any suggestion is appreciated.

EDIT - IMAGE UPLOAD

Image would be uploaded as string based in the database, the files would be uploaded to the folder. When the images are retrieved to the datatable it is done as this

$upload_dir = 'uploads/';
<tbody>
      <?php
      $sql  = "SELECT * FROM `product` WHERE `status`= 'New'";
      $result = mysqli_query($conn, $sql);   
      if(mysqli_num_rows($result)){
      while($row = mysqli_fetch_assoc($result)) {

<td><img src ="<?php echo $upload_dir.$image ?>" height="30" width="30" data-toggle="modal" data-target="#imagemodal<?php echo $row['id']?>"></td>
<?php
    }
?>

Then when the image thumbnail is clicked the full image would be shown in a modal.

EDIT - AFTER REMOVING IMAGE

LOCAL

LIVE

After removing the image resources, it is not bad. but for 19K records, still 10 SEC. isn't it a bit too much?

I'm sorry but, 45k rows of data, from a server will be cost expensive at all and on the DOM too. You have to think about pagination — Irvin Dominin, Sep 14 '20 at 06:30
We have 45k tables without pagination and is not very slow (this isn't a good idea, but they are not very very slow). I think the problem is here: `retrieve images`. Can you explain a bit more how you send images from database to datatable and how and where you render it? — Dani, Sep 14 '20 at 08:31
@IrvinDominin yes, pagination is implemented with 150 records per each page. you can see it here : paging": true, "pageLength": 150, — Roshan Zaid, Sep 14 '20 at 09:05
@Dani probably i think of the same too. in local it takes just 2-6 seconds to load when live it is 32 mins. duh? Images i upload per each record and save it in a folder. retrieving is just calling the image name in a cell as with minified height and width. — Roshan Zaid, Sep 14 '20 at 09:09
Waht is `$row['image']`, an url or base 64 image? What happens if you change it with ` ` ??? — Dani, Sep 14 '20 at 10:38
@Dani Please check EDIT - IMAGE UPLOAD, final part of the question which is been edited. — Roshan Zaid, Sep 14 '20 at 11:10
Whats happens when you remove image section from datatable? It goes fast? — Dani, Sep 14 '20 at 11:21
Please check the edited content - EDIT - AFTER REMOVING IMAGE — Roshan Zaid, Sep 14 '20 at 12:08
would loading the images async help you...45k still seems wayyy too much but i recommend this - https://stackoverflow.com/questions/15999760/load-image-asynchronous#:~:text=For%20async%20loading%20to%20work,and%20set%20the%20image%20URL. so rather than an image tag with a src...youll have an image tag with a script that populates the image — Ctznkane525, Sep 14 '20 at 12:12

score 0 · Accepted Answer · answered Nov 22 '20 at 09:07

The only solution which helped me was moving to Server Side with proper implementations and Pagination was mandatory to make it even faster. I have redeveloped the whole application and the requests were handled with AJAX which reduced a big amount of page load. it is with actual image size. Thanks all who were trying to fix this.

JQuery Datatable is too slow with image resources

1 Answers1