页眉和页脚呈现两次，排序正在运行但不是分页。
我尝试过：
我的代码如下所示。
$(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>