jQuery DataTables with Bootstrap Styling and responsive extension does't work

Question

In my html page i replaced the example of this link. In the head tag i have this:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
    <link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">

for the css and this:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http:////cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <script src="http:////cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
    <script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>

for the javascript.

The table is this:

<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>

I call datatable at the end of body with:

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

My code seems the same of the example on the DataTable site. It works and my doesn't work. Why?

You called the function to create the table? Like: $(document).ready(function() { $('#example').DataTable(); } ); — Fernando A.W.
– Fernando A.W., Commented Oct 1, 2014 at 17:42
@user3083618 Did you find a fix for this? I have the same problem. — Ram
– Ram, Commented Jan 29, 2015 at 21:48

Yameen · Accepted Answer · 2015-02-09 14:33:28Z

Is collapsing not working ? What is the issue you are getting. Any console error ? I have copied the same code as you have mentioned above and created a fiddle example. You can check it here ?Fiddle Example for Responsive DataTable Hope this helps .

HTML

<div class="row">
<div class="col-md-12">
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="90%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

body { font-size: 140% 
}
.row{
        border:1px solid black;
}     
table.dataTable th,
table.dataTable td {
        white-space: nowrap;
}

JS:

$(document).ready(function() {
    $('#example').DataTable();
} );

Ross · Accepted Answer · 2015-10-02 14:33:35Z

1

It looks like there's too many // symbols in your css & js lines. The second css link has:

link href="http:////cdn.datatables......

and it should be:

link href="http://cdn.datatables......

The second and third script calls have the same issue, too.

edited Oct 2, 2015 at 14:33

Ross

2,18616 silver badges26 bronze badges

answered Oct 2, 2015 at 13:58

mike v

3565 silver badges10 bronze badges

Comments

Robert · Accepted Answer · 2017-06-09 05:53:34Z

Premise: I'm writing this reply because I'm facing the same problem and since I don't find a good example/tutorial, I explain how I'll deal with this.

I suggest to look at the source code in the DataTables Bootstrap Styling page

DataTables Bootstrap Styling

That page shows DataTables and the Responsive extension being used with the Bootstrap framework providing the styling

Said first that below the demo table being shown in the DataTables Bootstrap Styling, there are the correct CSS, JS and HTML to be used for the case, and if am I not wrong, they are also placed in the correct order,

you have another option to go for:

just watch at the source code of that page, e.g. in Firefox I press Ctrl-u and in the address bar it is opened

view-source:https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

this allows to see the source code of the rendered html.

Find the same command for your browser and you'll see how at DataTables website they setup the CSS(es) and JS(es) scripts to make it working.

What looks sharp is that they just use this script to initialize the table

$(document).ready(function() {
    $('#example').DataTable();
} );

so no responsive keyword is used,

which makes it bright that the magic looks done by the singles CSS and JS (if correctly loaded).

In the end, to start from a safe point, place the js scripts loading in the HEAD section of your html test page and begin with making this to succesfully work,

only after a positive test, if needed, move them where you want.

bromgrev · Accepted Answer · 2015-11-09 14:40:49Z

-1

Ha! I had this very same problem.

    <link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">

Is referencing the wrong CSS file, which is:

responsive.dataTables.css

And why is the naming convention for the stylesheets different from the naming convention for the javascript files? Dunno!

answered Nov 9, 2015 at 14:40

bromgrev

1

Collectives™ on Stack Overflow

jQuery DataTables with Bootstrap Styling and responsive extension does't work

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related