数据表 - 响应不工作？

Question

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.

Answer 1

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

Answer 2

• You are missing https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css in your header and missed nowrap in class according to their examples.
• I personally would suggest to initiate responsive dataTable via javascript as it will provide more options to customise your UI.

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

Answer 3

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

Answer 4

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.