Where to add responsive value?

gusdelfI@student.gu.se

I have an existing DT system, I've downloaded the new CSS and JS responsive files and i'm now wondering where to add the responsive: true value to the JS scripts.

I assumed it would be table.home.js file

var table = $('#home').DataTable( {
        ajax: 'php/table.home.php',
        columns: [
            {
                "data": "full_name"
            },
            {
                "data": "level"
            },
            {
                "data": "id"
            },
            {
                "data": "email_"
            },
            {
                "data": "assesser"
            }
        ],
        rowReorder: {
            selector: 'td:nth-child(2)'
        },
        select: true,
        responsive: true,
        lengthChange: false
    } );

Like such, this seems to make no difference to the tables tho?

Thanks you!

kthorngren

Thats the correct place to enable responsive. Make sure you are loading the responsive JS and CSS, that there are no errors in your browser's console and that they are loaded in the correct order. You can use the Download Builder to verify the order.

Otherwise we will need a link to your page or a test case showing the issue to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

gusdelfI@student.gu.se

Thanks for the reply Kevin, I'l link to a live site later once I remove the login requirement.

This is how i'm calling the files in the home.php page,

'''

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/r-2.1.1/se-1.2.2/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.bootstrap.min.css">



    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/r-2.1.1/se-1.2.2/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.home.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/responsive.bootstrap.min.js"></script>

'''

Is that the correct order?

colin

It would be worth running the macro from the debugger - this will let you know if libraries are missing.

Cheers,

Colin

kthorngren

looks like you are adding Responsive twice; once in line 8 and the other in line 12. Click on the link in line 8 and you will see all the libraries being loaded. I suspect loading Responsive twice could be causing the problem.

You should consider running the Download Builder again to generate a CDN with the latest versions.

Kevin

gusdelfI@student.gu.se

Colin
I've used the debugger and no warning are appearing. The link is https://debug.datatables.net/ifunuw

It's telling me my version are outdated even after uploading the latest file downloaded from the download builder.

Kthorngren
Done, but no fix.

It seems to work if I make my window very small on my desktop, but not on my mobile or on google mobile friendly tester site. Which seems a bit odd?

allan

I think we'd need a link to a page showing the issue I'm afraid.

The download builder is a version behind the current releases as they are in fact identical - there was a bump release because of a packaging error for npm.

Allan

gusdelfI@student.gu.se

I've removed the front end you should be able to find the link here http://nuigmc.com/registeredclimbers/home.php

colin

Hi @gusdelfI@student.gu.se ,

I'd say it's working as expected. Because the table fits the entire page width, it does need to shrink significantly before the responsiveness kicks in. Also, the text first wraps, again reducing the need for responsiveness - this can be disabled by setting the class nowrap on the table.

Cheers,

Colin

gusdelfI@student.gu.se

Cheers Colin,

Glad to know it's working so! Thanks for the support