javascript - jQuery DataTable responsive doesnt work with Boostrap 3 -
i having problems responsive layout when use datatable js plugin. wont show if there responsive: true. tried manipulate css (white-space: nowrap) isnt solution. here preview of code.
html
<table id="example1" class="table table-bordered table-striped"> <thead> <tr> <th class="no-sort"></th> <th>product</th> <th>product category</th> <th>views</th> <th>average view time</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>accu-pass suture shuttle</td> <td>suture shuttle</td> <td>1,500 views</td> <td>8:38 minutes</td> </tr> </tbody> </table>
js
$('#example1').datatable({ responsive: true, columndefs: [ { targets: 'no-sort', orderable: false } ], "paging": true, "lengthchange": true, "searching": true, "ordering": true, "info": false, "autowidth": true, });
in fiddle example, missing jquery , datatable plugin.
fiddle example jquery , datable plugin: https://jsfiddle.net/n2vbzn8g/2/
jquery
$(document).ready(function() { $('#example1').datatable( { responsive: true, columndefs: [ { targets: 'no-sort', orderable: false } ], "paging": false, "lengthchange": true, "searching": false, "ordering": false, "info": false, "autowidth": true } ); } );
table
<table id="example1" class="table table-bordered table-striped"> <thead> <tr> <th class="no-sort"></th> <th>product</th> <th>product category</th> <th>views</th> <th>average view time</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>accu-pass suture shuttle</td> <td>suture shuttle</td> <td>1,500 views</td> <td>8:38 minutes</td> </tr> </tbody> </table>
Comments
Post a Comment