Question

100

Datatables - Responsive not working?

rated 0 times [ 107] [ 7] / answers: 1 / hits: 18067 / 7 Years ago, wed, february 1, 2017, 12:00:00

I am trying to understand why Datatables (https://datatables.net/) Responsive wouldn't be working. Everything else is working great, paging, searching, ordering, etc.. but not responsive?

Below is what I have.

Bootstrap v3.3.6

$(function () {

    $('#ManageUsers').DataTable({

        paging: true,

        lengthChange: true,

        searching: true,

        ordering: true,

        info: true,

        autoWidth: true,

        responsive: true

    });

});

<!-- CSS -->

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>

<link rel=stylesheet href=https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css>

<!-- JS -->

<script src=https://code.jquery.com/jquery-2.2.4.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>



<script src=https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js></script>

<script src=https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js></script>

<script src=https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js></script>





<!-- CODE -->



<table id=ManageUsers class=table table-bordered table-striped display responsive>

    <thead>

        <tr>

            <th>...</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>...</td>

        </tr>

    </tbody>

</table>

Any help will be greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byronkodyo

Add To Favorites

Follow

Total Points: 552

Total Questions: 87

Total Answers: 104

Location: Burundi

Member since Sat, Aug 21, 2021

3 Years ago

answered 7 Years ago dominickmackenziet · Accepted Answer

Try loading the libraries in this order like in the DEMO.

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js></script>

<script data-require=datatables@* data-semver=1.10.12 src=//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js></script>

<script src=https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js></script>

<script src=https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js></script>



<link href=//cdn.datatables.net/responsive/2.1.1/css/dataTables.responsive.css/>

<link data-require=datatables@* data-semver=1.10.12 rel=stylesheet href=//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css />

<link data-require=bootstrap@* data-semver=4.0.5 rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css />