Responsive Extention not doing anything

MartinEB

Hi, i have this page with a DataTable on it, ive tried using the responsive extention to make it more phone friendly but i cant get it to do anything, i want it to scale the width and put all the content that isnt shown under buttons like shown here https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html
I think the problem is that it isnt scaling the width at all, when i make the browser window smaller the contrainer around the table scales but the table just keeps it initial width, how do i fix this?

  <?php 
        require "../models/header.php";
    ?>
    <header>
        <nav class="navbar navbar-expand-md bg-dark navbar-dark navbar-fixed-top">
        <a class="navbar-brand" href="../">Inventar System</a>
    </nav>
    </header>
    <div class="bg">
        <div class="contrainer-fluid">
            <div class="row justify-content-center">
                <div class="col-md-10 bg-light mt-1 rounded pb-1 mt-3">
                    <div class="form-inline mt-3">
                        <input type="text" name="search" id="search_text" class="form-control form-control-lg rounded-0 border-primary w-50" placeholder="Søk...">
                    </div>
                    <hr>
                    <?php
                        require "../includes/dbh.inc.php";
                        $stmt=$conn->prepare("SELECT * FROM inventar");
                        $stmt->execute();
                        $result=$stmt->get_result();
                    ?>
                    <table class="responsive table table-hover table-light table-striped" id="table-data">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th data-priority="1">Navn</th>
                                <th>Plassering</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php while($row=$result->fetch_assoc()){?>
                            <tr>
                                <td><?= $row['invUid'];?></td>
                                <td><?= $row['invNavn'];?></td>
                                <td><?= $row['invStatus']==="i" ? $row['invPlassering'] : "";?></td>
                                <td><?= $row['invStatus']==="i" ?"Inskjekket":"Utlånt";?></td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#table-data").DataTable({searching: false,responsive: true, language: {
                "sEmptyTable": "Ingen data tilgjengelig i tabellen",
                "sInfo": "Viser _START_ til _END_ av _TOTAL_ linjer",
                "sInfoEmpty": "Viser 0 til 0 av 0 linjer",
                "sInfoFiltered": "(filtrert fra _MAX_ totalt antall linjer)",
                "sInfoPostFix": "",
                "sInfoThousands": " ",
                "sLoadingRecords": "Laster...",
                "sLengthMenu": "Vis _MENU_ linjer",
                "sLoadingRecords": "Laster...",
                "sProcessing": "Laster...",
                "sSearch": "S&oslash;k:",
                "sUrl": "",
                "sZeroRecords": "Ingen linjer matcher s&oslash;ket",
                "oPaginate": {
                    "sFirst": "F&oslash;rste",
                    "sPrevious": "Forrige",
                    "sNext": "Neste",
                    "sLast": "Siste"
                },
                "oAria": {
                    "sSortAscending": ": aktiver for å sortere kolonnen stigende",
                    "sSortDescending": ": aktiver for å sortere kolonnen synkende"
                }
            }});

                $("#search_text").keyup(function(){
                    var search = $(this).val();
                    $.ajax({
                        url:"../includes/search_action.inc.php",
                        method:"post",
                        data:{query:search},
                        success:function(response){
                            $("#table-data").html(response);
                        }
                    });
                });
            });
        </script>
    </div>
    <?php 
        include "../models/foter.php";
    ?>

kthorngren

You have the responsive class on the table tag so it should enable responsive. Did you include the Responsive JS and CSS files? You can get them from the Download Page.

Kevin

MartinEB

Hi, yes i have included the responsive js and css, but its still not responsive.

kthorngren

Try adding style="width:100%" as described in this example. If this doesn't help then we will need to see the problem to help debug. Please post a link to your page or create a test case replicating the problem.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MartinEB

Hi, that helped making it scale but its still not responsive, its currently located at https://inventar.torhelge.no/search/

MartinEB

Wait, now it works, but only when it gets scaled down alot

MartinEB

Nvm, still doesnt work on my phone, but it worked when i opened the chrome developer tab and changed the size to a Galaxy s5 on my pc.

kthorngren

I noticed you have conflicting CSS:

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.22/r-2.2.6/datatables.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css">

The second line is used for default Datatables styling. The first line includes the responsive CSS for bootstrap 4 styling. This isn't the issue but you may want to remove the second line.

I think the problem is that the table columns resize as the windows size changes. Since the data can fit Datatables doesn't hide the columns via Responsive. There are options you can use to control this if you like. One option is using Class Control as shown in this example. I copied your example and added a couple classes to demonstrate:
http://live.datatables.net/qodalaqu/1/edit

Also removed that extra CSS.

Kevin

MartinEB

Thank you! Now it works perfectly.
Martin