[英]responsive datatable not working with bootstrap
The header and footer are rendered twice, and sorting is working but not pagination. 页眉和页脚被渲染两次,并且排序有效,但分页无效。
What I have tried: 我试过的
My code is shown below. 我的代码如下所示。
$(document).ready(function() { $('#dataTables-example').DataTable({ responsive: true }); });
<script src="../bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script> <!-- Morris Charts JavaScript --> <script src="../bower_components/raphael/raphael-min.js"></script> <script src="../bower_components/morrisjs/morris.min.js"></script> <script src="../js/morris-data.js"></script> <script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script> <script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script> <div class="dataTable_wrapper"> <div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"> <div class="row"> <div class="col-sm-6"> <div class="dataTables_length" id="dataTables-example_length"> <label>Show <select name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select>entries</label> </div> </div> <div class="col-sm-6"> <div id="dataTables-example_filter" class="dataTables_filter"> <label>Search: <input type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example"> </label> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"> <div class="row"> <div class="col-sm-6"> <div class="dataTables_length" id="dataTables-example_length"> <label>Show <select name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select>entries</label> </div> </div> <div class="col-sm-6"> <div id="dataTables-example_filter" class="dataTables_filter"> <label>Search: <input type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example"> </label> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <table class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info"> <thead> <tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column descending" style="width: 0px;" aria-sort="ascending">Rendering engine</th> <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 0px;">Browser</th> <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 0px;">Platform(s)</th> <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 0px;">Engine version</th> <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 0px;">CSS grade</th> </tr> </thead> <tbody> <tr class="gradeA odd" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Camino 1.0</td> <td>OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA even" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Camino 1.5</td> <td>OSX.3+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA odd" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Epiphany 2.20</td> <td>Gnome</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA even" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.7</td> <td class="center">A</td> </tr> <tr class="gradeA odd" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA even" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Firefox 2.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA odd" role="row"> <td class="sorting_1">Gecko</td> <td class="sorting_1">Firefox 3.0</td> <td>Win 2k+ / OSX.3+</td> <td class="center">1.9</td> <td class="center">A</td> </tr> <tr class="gradeX even" role="row"> <td class="sorting_1">Misc</td> <td class="sorting_1">Dillo 0.8</td> <td>Embedded devices</td> <td class="center">-</td> <td class="center">X</td> </tr> <tr class="gradeU odd" role="row"> <td class="sorting_1">Other browsers</td> <td class="sorting_1">All others</td> <td>-</td> <td class="center">-</td> <td class="center">U</td> </tr> <tr class="gradeA even" role="row"> <td class="sorting_1">Trident</td> <td class="sorting_1">AOL browser (AOL desktop)</td> <td>Win XP</td> <td class="center">6</td> <td class="center">A</td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="dataTables_info" id="dataTables-example_info" role="status" aria-live="polite">Showing 1 to 10 of 10 entries</div> </div> <div class="col-sm-6"> <div class="dataTables_paginate paging_simple_numbers" id="dataTables-example_paginate"> <ul class="pagination"> <li class="paginate_button previous disabled" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_previous"><a href="#">Previous</a> </li> <li class="paginate_button active" aria-controls="dataTables-example" tabindex="0"><a href="#">1</a> </li> <li class="paginate_button next disabled" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next"><a href="#">Next</a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="dataTables_info" id="dataTables-example_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> </div> <div class="col-sm-6"> <div class="dataTables_paginate paging_simple_numbers" id="dataTables-example_paginate"> <ul class="pagination"> <li class="paginate_button previous disabled" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_previous"><a href="#">Previous</a> </li> <li class="paginate_button active" aria-controls="dataTables-example" tabindex="0"><a href="#">1</a> </li> <li class="paginate_button " aria-controls="dataTables-example" tabindex="0"><a href="#">2</a> </li> <li class="paginate_button " aria-controls="dataTables-example" tabindex="0"><a href="#">3</a> </li> <li class="paginate_button " aria-controls="dataTables-example" tabindex="0"><a href="#">4</a> </li> <li class="paginate_button " aria-controls="dataTables-example" tabindex="0"><a href="#">5</a> </li> <li class="paginate_button " aria-controls="dataTables-example" tabindex="0"><a href="#">6</a> </li> <li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next"><a href="#">Next</a> </li> </ul> </div> </div> </div> </div> </div>
I have implemented responsive DataTable many times. 我已经多次实现了响应式DataTable。 Just read document Responsive DataTable . 只需阅读文档响应数据表 。 I hope this will help you. 我希望这能帮到您。 You have to add .table-responsive class. 您必须添加.table-sensitive类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.