Where have my thumbnail images gone?

trustedsamurai

Hi,
Sorry for the vague question. I have built a table with approx 150 rows. Each row contains a thumbnail image. These display when I view the table on its own but when I view it within datatables I only see the thumbnails on the first page. Every other page shows everything except the thumbnail.

You can see the page here.
https://handfish.org.au/ja/

Second, if I'm allowed to ask here, I've set dt to show 50 rows on each page, but it only shows 15.

My code looks like this:

(function($) {
   var table = $('#fish_list').DataTable({
     
     "lengthMenu": [ [15, 25, 50, -1], [ 50,100,150, "All"] ],
    });
    table.responsive().rebuild();
  
}(jQuery));

Thank you very much for your time.

colin

Hi @trustedsamurai ,

Easiest first, lengthMenu - the first array is the page lengths, the second array is what is displayed. You've got show "15", but display it as "50"!

I'm not sure why the images aren't being displayed - it seems that even if it isn't a DataTable, i.e. just a plain HTML table, those images aren't present. You can confirm that by just commenting out the DataTable initialisation. It could be because table.responsive().rebuild(); is returning a console error - probably because you haven't included the Responsive source files. I'd say fix that error first, or remove that line, and see if that resolves it.

Cheers,

Colin

trustedsamurai

Hi @colin,

Thank you for your response. You were spot on about the lengthMenu settings!

I had forgotten about the responsiveness not working but you've drawn my attention back to it.

I changed the settings on the Download builder page to include Responsive then copied the CDN links. it adds /r-2.2.2/ to the stylesheet and javascript links. When I refresh the page I still get the console error though you can see from my screenshot that I am loading r-2.2.2

http://prntscr.com/o9dy96

So I am not sure what is going on there. Any thoughts?

Regards,
John.

colin

Hi @trustedsamurai ,

The lengthMenu is still wrong:

     "lengthMenu": [ [50,-1], [ 50,100,150, "All"] ],

should be

     "lengthMenu": [ [50,-1], [ 50, "All"] ],

All I can think is that table is initialising too soon before the other sources have loaded. Try adding this around your code

$(document).ready( function () {
 // your code goes here
})

Hopefully that'll do the trick,

Cheers,

Colin

trustedsamurai

RESOLVED:
Colin thanks heaps. Just for the record I added the instruction to JQuery to wait for the libraries to load and also changed the syntax and use of the responsive request.

My query now looks like below. And the thumbnails are back too!!!

(function($) {
    'use strict';
    $(document).on('ready', function() {
     
var table = $('#fish_list').DataTable({
     
     "lengthMenu": [ [50,-1], [ 50, "All"] ],
  responsive: true,
    });

    });
})(jQuery);