Where to add responsive value?

Where to add responsive value?

gusdelfI@student.gu.segusdelfI@student.gu.se Posts: 5Questions: 1Answers: 0

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!

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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.segusdelfI@student.gu.se Posts: 5Questions: 1Answers: 0

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited August 2018

    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.segusdelfI@student.gu.se Posts: 5Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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.segusdelfI@student.gu.se Posts: 5Questions: 1Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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.segusdelfI@student.gu.se Posts: 5Questions: 1Answers: 0

    Cheers Colin,

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

This discussion has been closed.