How to get responsive to work properly?

Oliver Utsch

Link to test case: https://oumbg.myqnapcloud.com:8081/DataTablesResponsiveNotWorking.html
Description of problem: I have created the links on the downlaod page of datatables and included in my header as directed and I have set the "responsive" option in HTML as well as in JS, but it just does not work. The whole table stays fixed on all display sizes and devices. Having run the debugger I see that responsive isn't loaded at all, but I thought including the two links
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/fh-3.1.7/r-2.2.6/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/fh-3.1.7/r-2.2.6/datatables.min.js"></script>
in the header should be fine.

Moreover it also always shows only the first 10 entries although I have set data-page-length="25".

Probably silly errors, I'm new to DT, but anyone a hint how to fix this?

kthorngren

You are loading datatables.js and datatables.css twice:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/fh-3.1.7/r-2.2.6/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/fh-3.1.7/r-2.2.6/datatables.min.js"></script>

    <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

Remove the last two lines. That will probably fix the responsive issue.

Your DOM sourced table has only 10 rows so that is all you will see. Try adding more rows to see the page length grow.

Kevin