响应式数据表不适用于引导程序答案

【问题标题】：responsive datatable not working with bootstrap响应式数据表不适用于引导程序
【发布时间】：2015-06-28 00:13:47
【问题描述】：

页眉和页脚渲染两次，排序正常，但分页无效。

我尝试过的：

添加了最新的 jQuery 版本
在已经包含所有 CSS 的情况下，在最后包含 JS 文件。
使表格在文档就绪时响应。
我已将页面转换为 XHTML 并检查了任何打开的标签，一切正常

我的代码如下所示。

$(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>

【问题讨论】：

欢迎来到 Stack Overflow！您的问题缺少屏幕截图。另外请在与表相关的$(document).ready()处理程序中显示您的代码，即DataTable初始化代码等。另外我没有看到Responsive plug-in文件包括：dataTables.responsive.css和dataTables.responsive.js。
我很想附上截图，但由于缺乏信誉点，堆栈溢出不允许，而且我发布的代码显示不正确，但是我试图删除此页面的 jquery 自动完成主题现在渲染还可以，但分页仍然无法正常工作
您已插入渲染代码，就好像它是从代码检查器中复制的一样。此代码由 DataTables 生成。请发布您的 HTML 文件中的原始 HTML。
我多么愚蠢，我很惭愧地问了这个问题，这是因为我懒得打开文件并从代码检查器中处理表格标签，从未意识到它可能是动态生成的代码。非常感谢你让我免于再次发明桌子：D

标签： javascript jquery twitter-bootstrap datatables

【解决方案1】：

我已经多次实现了响应式 DataTable。只需阅读文档Responsive DataTable。我希望这能帮到您。你必须添加 .table 响应式类。

【讨论】：