49

I'm using Datatables.net latest, with datatables and bootstrap. I suppose my question is: What does Datatables Responsive Bootstrap use to detect overflow, because it clearly isn't the parent width.

Here is my result: enter image description here

It's a pretty straight forward problem. If I reduce the width of my window 1 more pixel the column will finally collapse. If I then expand it, it returns to this state. I would like to prevent overflow from the parent bootstrap panel. I've removed the bootstrap grid divs (row/col-xs-12, etc) to eliminate potitial problems, but once this is resolved (or I better understand the problem) I intend to utilize the bootstrap grid system as well.

Here is a plunkr that perfectly replicated the problem (collapse the run view): http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR?p=preview

<!DOCTYPE html>

<html>
<head>
    <title>Tables - PixelAdmin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
    <style>
        body {
            font-size: 140%;
        }

        table.dataTable th,
        table.dataTable td {
            white-space: nowrap;
        }
    </style>
</head>

<body style="padding-top: 40px;">

<div class="panel panel-primary" style="margin: 51px; padding: 0;">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body" style="padding: 0;">
        <div style="width: 100%; border: 1px solid red;">
            <table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<script>
    $(document).ready(function () {
        $('#example')
                .dataTable({
                    "responsive": true,
                    "ajax": 'data.json'
                });
    });
</script>

</body>
</html>
Improve this question
2

10 Answers 10

Reset to default
76

Add Div with class "table-responsive" before table start and delete width = "100%" from table tag ,

<div class="panel panel-primary" style="margin: 50px;">
<div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
    <div style="width: 100%; padding-left: -10px; border: 1px solid red;">
    <div class="table-responsive">  <-- add this div
        <table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> <-- remove width from this
            <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
            </thead>
        </table>
        </div>
    </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Adding table-responsive definitely helped. removing width=100% from the table causes many problems. I've added overflow:hidden to the container to prevent the columns from overflowing, but I'm still seeing a large portion of columns getting hidden before they collapse.
I found the solution here stackoverflow.com/questions/604933/…
this is a solution for normal table..not working in datatables
Removing width from table seems to give more problems than it solves. And wrapping the table in a div i don't now if that's the best especially if you have things that go out of table like a dropdown of options.
autoWidth: false; set this property while rendering the datatable, this fixed my issue
25

i know this post is old, for anyone trying to get this done simply do this 

<table id="example" class="display" cellspacing="0" width="100%"></table>

add width="100%" it should take it and make it responsive without any configuration of such

check out Fiddle Working

Improve this answer

2 Comments

You also need to add responsive: true in the config.
This also seems to solve the problem of the table content resizing while the headers do not. (Knock wood...)
11

You need to include responsive css and js

https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.css
https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js

 <table class="table table-striped table-bordered dataTable display" cellspacing="0" width="100%">
</table>

This is working for me. One thing always keep in mind that you have to include jquery and datatable css and js.

$('.dataTable').dataTable({
         "responsive": true,

    });
Improve this answer

1 Comment

Adding cdn.datatables.net/responsive/2.2.7/css/…, and cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js worked for me. I wasn't using bootstrap.<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css"> <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js"></script>
10

For me the problem got fixed when I put the table container div inside a bootstrap row div.

<div class="row">
 <div class="table-responsive">
   ... //table here
 </div>
</div>

The reason for this was that datatables bootstrap version was adding some col-* to toolbar (in my case) which were falling as direct children under another parent col-. The col- ideally should be children of row rather than col (as far as I understand).enter image description here

Improve this answer

1 Comment

In my case this solution remove the space between panel-body and the my table
6

I know this post is old, but if someone is having this problem, try the following:

After updating the content of the DataTable use this code (dt_table is my instance of a Responsive DataTable):

dt_table.draw();
dt_table.columns.adjust().responsive.recalc();

More info: https://datatables.net/reference/api/responsive.recalc()

Improve this answer

2 Comments

I had an issue with the table overflowing to the right before it would eventually collapse. Adding a tableElement.DataTable().responsive.recalc() call after I bound my data to the dataTable seemed to fix that. I was adding rows to the table with DataTable().row.add(value).draw() previously. I think somehow my technique was not automatically recalculating collapse widths.
Marry me! LOL, thank you so much. Struggling hours and this is the only solution that worked for me. I was also using DataTable().row.add(value).draw()
1

In my case I found that hiding the table or it's container on page load using CSS display:none was avoiding the responsive behaviour.

The (unpreferred) solution is to hide the table or it's container by JavaScript instead of CSS.

Improve this answer

Comments

1

What worked for me is placing the table in a container with a custom class dtable-container

HTML

 <div class="dtable-container">
  <table id="datatable" class="table table-striped table-bordered">

  </table>
 </div>

CSS/LESS

.dtable-container {
    max-width: 100% !important;


    table {
        white-space: nowrap !important;
        width:100%!important;
        border-collapse:collapse!important;
    }
}
Improve this answer

1 Comment

im now working with my mini project laravel with datatables, and this works for me. great!
1

Updating from DataTables version 1.10.12 to 1.10.8 I encountered a similar issue.

An accessibility scan had flagged the width="100%" and cellspacing attributes negatively so I removed them from the html and switch to a css selector in a separate file.

Tables resizing began to fail and started triggering horizontal scroll bars. I noticed the the element was having it's style automatically set to style="width: px;".

I had to set the selector in the css to width: 100% !important. The border-spacing attribute did not require this.

I had seen other answers where the 100% width had been mentioned but what I didn't realize was that in needed the "!important" tag.

I was never able to determine what triggered the change but we're using jquery.dataTables.js and dataTables.responsive.js along with bootstrap.

Improve this answer

Comments

0

My case is just like cem, but in my case i solved by adding setTimeout to wait a while (around 200 miliseconds) to set datatable

Improve this answer

Comments

0

Html

 <!--Modal-->
 <div id="_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="_modal"
     aria-hidden="true">
     <div class="modal-dialog modal-sm modal-dialog-centered " role="document">
         <div class="modal-content">
             <div class="modal-header">
                    Title
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body" >
                 <!--Datatable-->
                 <table id="_datatable" class="table table-striped table-xl responsive" style="width:100%">
                    <thead>
                        <tr>
                            <th>Field 1</th>
                            <th>Field 2</th>
                            <th>Field 3</th>
                            <th>Field 4</th>
                            <th>Field 5</th>
                            <th>Field 6</th>
                            <th>Field 7</th>
                            <th>Field 8</th>
                            <th>Field 9</th>
                            <th>Field 10</th>
                        </tr>
                    </thead>
                    <tbody>
                       <tr>
                            <th>Data 1</th>
                            <th>Data 2</th>
                            <th>Data 3</th>
                            <th>Data 4</th>
                            <th>Data 5</th>
                            <th>Data 6</th>
                            <th>Data 7</th>
                            <th>Data 8</th>
                            <th>Data 9</th>
                            <th>Data 10</th>
                       </tr>
                    </tbody>
                </table>
             </div>
         </div>
     </div>
 </div>

Javascript

//Trigger when the modal open
$('#_modal').on('shown.bs.modal', function(e) {     
    $("#_datatable").DataTable().columns.adjust().responsive.recalc();
});
//Datatable configuration
$('#_datatable').DataTable({
     responsive: true,
     initComplete: function() {
         //Show datatable when load complete
         $('#_datatable').show();
     }
});

If you need to update responsive of datable when open a modal the right way is calling datatable columns adjust function when the modal opens, like the example! Hope it help someone ^^

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.