CODEWITHSUNDEEP
javascriptjqueryhtmldatatable
LeviZoesch
LeviZoesch

Reputation: 1621

Datatables - Responsive not working?

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.

Upvotes: 3

Views: 20942

Answers (4)

Adnan Siddique
Adnan Siddique

Reputation: 422

Just use this script at the bottom of your file

<script>
  $(function () {
    $("#manageUsers").DataTable({
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "autoWidth": false, 
            "order": [[0, "desc"]],
            responsive: true,
            "processing": true,
            "serverSide": false,
            "sAjaxSource": "data.js",
            "columns": [
            { "data": "name[, ]" },
            { "data": "hr.0" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "hr.2" },
            { "data": "hr.1" }
    });
  </script>

It worked for me.

Upvotes: 0

TNT
TNT

Reputation: 870

Try using width=100% in table. Not pretty, but it worked for me.

Upvotes: 1

Chris Chen
Chris Chen

Reputation: 1293

Please refer to these links for reference https://datatables.net/extensions/responsive/examples/initialisation/default.html https://datatables.net/extensions/responsive/examples/initialisation/className.html https://datatables.net/extensions/responsive/examples/initialisation/option.html

Upvotes: 2

Offir
Offir

Reputation: 3491

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" />

Upvotes: 8

Related Questions