将不同div标签中的多个表转换为可排序/可搜索的表
我在一个页面上有很多表。但是，只有第一个表是可排序/可搜索的。我想将所有表转换为可排序/可搜索的表。我确保它们都具有相同的类和相同的ID，但无论我做什么，第一个表是唯一可排序/可搜索的表。我正在使用dataTables.bootstrap和jquery.dataTables.js。
为所有表格提供类display（根据this tutorial）我运行了以下js，期望得到所需的结果：
$(document).ready(function() {
$('table.display').dataTable();
} );
这是我的完整html页面（对不起，这很长，但我想显示页面的结构）。
<div id="wrapper">
<div id="page-wrapper_frame">
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Cost Report</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Fiscal Year Dates
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
</tr>
</thead>
<tbody>
<tr>
<td>testdata</td>
<td class="align-right">10/1/13</td>
<td class="align-right">7/1/13</td>
<td class="align-right">7/1/13</td>
<td class="align-right">10/1/12</td>
<td class="align-right">10/1/13</td>
<td class="align-right">10/1/13</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">9/30/14</td>
<td class="align-right">6/30/14</td>
<td class="align-right">6/30/14</td>
<td class="align-right">9/30/13</td>
<td class="align-right">9/30/14</td>
<td class="align-right">9/30/14</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Income Statement
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
</tr>
<thead>
<tbody>
<tr>
<td>testdata</td>
<td class="align-right">$9,365,981</td>
<td class="align-right">$906,342,935</td>
<td class="align-right">$84,721,081</td>
<td class="align-right">$25,517,352</td>
<td class="align-right">$19,917,566</td>
<td class="align-right">$25,969,753</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$48,953,782</td>
<td class="align-right">$1,172,748,579</td>
<td class="align-right">$288,978,245</td>
<td class="align-right">$71,797,156</td>
<td class="align-right">$60,472,586</td>
<td class="align-right">$79,334,724</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$58,319,763</td>
<td class="align-right">$2,079,091,514</td>
<td class="align-right">$373,699,326</td>
<td class="align-right">$97,314,508</td>
<td class="align-right">$80,390,152</td>
<td class="align-right">$105,304,477</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$17,858,041</td>
<td class="align-right">$1,206,080,155</td>
<td class="align-right">$232,442,441</td>
<td class="align-right">$46,783,039</td>
<td class="align-right">$34,600,804</td>
<td class="align-right">$55,832,703</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$40,461,722</td>
<td class="align-right">$873,011,359</td>
<td class="align-right">$141,256,885</td>
<td class="align-right">$50,531,469</td>
<td class="align-right">$45,789,348</td>
<td class="align-right">$49,471,774</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$44,523,416</td>
<td class="align-right">$905,003,970</td>
<td class="align-right">$139,174,532</td>
<td class="align-right">$56,676,758</td>
<td class="align-right">$49,188,951</td>
<td class="align-right">$55,198,560</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">-$4,061,694</td>
<td class="align-right">-$31,992,611</td>
<td class="align-right">$2,082,353</td>
<td class="align-right">-$6,145,289</td>
<td class="align-right">-$3,399,603</td>
<td class="align-right">-$5,726,786</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$18,523</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$653,760</td>
<td class="align-right">$0</td>
<td class="align-right">$47,184</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$1,846,432</td>
<td class="align-right">$854,475</td>
<td class="align-right">$0</td>
<td class="align-right">$357,147</td>
<td class="align-right">$0</td>
<td class="align-right">$1,058,756</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$0</td>
<td class="align-right">$1,993,366</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$2,394,137</td>
<td class="align-right">$121,869,720</td>
<td class="align-right">-$1,468,370</td>
<td class="align-right">$5,722,029</td>
<td class="align-right">$3,813,929</td>
<td class="align-right">$2,214,932</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$4,259,092</td>
<td class="align-right">$122,724,195</td>
<td class="align-right">-$1,468,370</td>
<td class="align-right">$6,732,936</td>
<td class="align-right">$3,813,929</td>
<td class="align-right">$3,320,872</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$3</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$44,523,416</td>
<td class="align-right">$905,003,970</td>
<td class="align-right">$139,174,532</td>
<td class="align-right">$56,676,758</td>
<td class="align-right">$49,188,951</td>
<td class="align-right">$55,198,563</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$197,398</td>
<td class="align-right">$90,731,584</td>
<td class="align-right">$613,983</td>
<td class="align-right">$587,647</td>
<td class="align-right">$414,326</td>
<td class="align-right">-$2,405,917</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$1,975,319</td>
<td class="align-right">$34,951,967</td>
<td class="align-right">$8,573,237</td>
<td class="align-right">$3,722,219</td>
<td class="align-right">$1,551,948</td>
<td class="align-right">$2,208,306</td>
</tr>
<tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
KPIs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
</tr>
</thead>
<tbody>
<tr>
<td>testdata</td>
<td class="align-right">20</td>
<td class="align-right">294</td>
<td class="align-right">78</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">5</td>
<td class="align-right">93</td>
<td class="align-right">20</td>
<td class="align-right">0</td>
<td class="align-right">0</td>
<td class="align-right">0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">25</td>
<td class="align-right">387</td>
<td class="align-right">98</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">262</td>
<td class="align-right">3,897</td>
<td class="align-right">483</td>
<td class="align-right">365</td>
<td class="align-right">314</td>
<td class="align-right">292</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">508</td>
<td class="align-right">18,202</td>
<td class="align-right">2,923</td>
<td class="align-right">905</td>
<td class="align-right">320</td>
<td class="align-right">1,681</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">4,135</td>
<td class="align-right">106,400</td>
<td class="align-right">12,619</td>
<td class="align-right">5,640</td>
<td class="align-right">6,068</td>
<td class="align-right">6,194</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">97.0</td>
<td class="align-right">67.9</td>
<td class="align-right">101.0</td>
<td class="align-right">74.0</td>
<td class="align-right">73.1</td>
<td class="align-right">78.0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">8.1</td>
<td class="align-right">5.8</td>
<td class="align-right">4.3</td>
<td class="align-right">6.2</td>
<td class="align-right">19.0</td>
<td class="align-right">3.7</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$40,461,722</td>
<td class="align-right">$873,011,359</td>
<td class="align-right">$141,256,885</td>
<td class="align-right">$50,531,469</td>
<td class="align-right">$45,789,348</td>
<td class="align-right">$49,471,774</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">11.3</td>
<td class="align-right">291.5</td>
<td class="align-right">34.6</td>
<td class="align-right">15.5</td>
<td class="align-right">16.6</td>
<td class="align-right">17.0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">45.3%</td>
<td class="align-right">75.3%</td>
<td class="align-right">35.3%</td>
<td class="align-right">61.8%</td>
<td class="align-right">66.5%</td>
<td class="align-right">67.9%</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
以下是一些截图：
我不知道为什么只有第一个表可以排序/搜索而不是全部。任何帮助将不胜感激！谢谢！
2 个答案:
答案 0 :(得分：1)
鉴于您发布的代码是您实际使用的代码，引用了jQuery，jQuery dataTables，jQuery dataTable css以及类似Bootstrap的内容，所有内容都应该落实到位。
jQuery dataTables带有开箱即用的排序/过滤功能（以及许多其他有用的功能），因此配置它时你需要做的事情真的不多。
以下是您的代码有效的证明。我会确保你在加载dataTable之前加载jQuery，因为它是一个依赖项。
$(document).ready(function() {
var s = $('table.display').dataTable();
s.css({
'color': 'blue'
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<div id="wrapper">
<div id="page-wrapper_frame">
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Cost Report</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Fiscal Year Dates
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
</tr>
</thead>
<tbody>
<tr>
<td>testdata</td>
<td class="align-right">10/1/13</td>
<td class="align-right">7/1/13</td>
<td class="align-right">7/1/13</td>
<td class="align-right">10/1/12</td>
<td class="align-right">10/1/13</td>
<td class="align-right">10/1/13</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">9/30/14</td>
<td class="align-right">6/30/14</td>
<td class="align-right">6/30/14</td>
<td class="align-right">9/30/13</td>
<td class="align-right">9/30/14</td>
<td class="align-right">9/30/14</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Income Statement
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
<th>testdata</th>
</tr>
<thead>
<tbody>
<tr>
<td>testdata</td>
<td class="align-right">$9,365,981</td>
<td class="align-right">$906,342,935</td>
<td class="align-right">$84,721,081</td>
<td class="align-right">$25,517,352</td>
<td class="align-right">$19,917,566</td>
<td class="align-right">$25,969,753</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$48,953,782</td>
<td class="align-right">$1,172,748,579</td>
<td class="align-right">$288,978,245</td>
<td class="align-right">$71,797,156</td>
<td class="align-right">$60,472,586</td>
<td class="align-right">$79,334,724</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$58,319,763</td>
<td class="align-right">$2,079,091,514</td>
<td class="align-right">$373,699,326</td>
<td class="align-right">$97,314,508</td>
<td class="align-right">$80,390,152</td>
<td class="align-right">$105,304,477</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$17,858,041</td>
<td class="align-right">$1,206,080,155</td>
<td class="align-right">$232,442,441</td>
<td class="align-right">$46,783,039</td>
<td class="align-right">$34,600,804</td>
<td class="align-right">$55,832,703</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$40,461,722</td>
<td class="align-right">$873,011,359</td>
<td class="align-right">$141,256,885</td>
<td class="align-right">$50,531,469</td>
<td class="align-right">$45,789,348</td>
<td class="align-right">$49,471,774</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$44,523,416</td>
<td class="align-right">$905,003,970</td>
<td class="align-right">$139,174,532</td>
<td class="align-right">$56,676,758</td>
<td class="align-right">$49,188,951</td>
<td class="align-right">$55,198,560</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">-$4,061,694</td>
<td class="align-right">-$31,992,611</td>
<td class="align-right">$2,082,353</td>
<td class="align-right">-$6,145,289</td>
<td class="align-right">-$3,399,603</td>
<td class="align-right">-$5,726,786</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$18,523</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$653,760</td>
<td class="align-right">$0</td>
<td class="align-right">$47,184</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$1,846,432</td>
<td class="align-right">$854,475</td>
<td class="align-right">$0</td>
<td class="align-right">$357,147</td>
<td class="align-right">$0</td>
<td class="align-right">$1,058,756</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$0</td>
<td class="align-right">$1,993,366</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$2,394,137</td>
<td class="align-right">$121,869,720</td>
<td class="align-right">-$1,468,370</td>
<td class="align-right">$5,722,029</td>
<td class="align-right">$3,813,929</td>
<td class="align-right">$2,214,932</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$4,259,092</td>
<td class="align-right">$122,724,195</td>
<td class="align-right">-$1,468,370</td>
<td class="align-right">$6,732,936</td>
<td class="align-right">$3,813,929</td>
<td class="align-right">$3,320,872</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$0</td>
<td class="align-right">$3</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$44,523,416</td>
<td class="align-right">$905,003,970</td>
<td class="align-right">$139,174,532</td>
<td class="align-right">$56,676,758</td>
<td class="align-right">$49,188,951</td>
<td class="align-right">$55,198,563</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$197,398</td>
<td class="align-right">$90,731,584</td>
<td class="align-right">$613,983</td>
<td class="align-right">$587,647</td>
<td class="align-right">$414,326</td>
<td class="align-right">-$2,405,917</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$1,975,319</td>
<td class="align-right">$34,951,967</td>
<td class="align-right">$8,573,237</td>
<td class="align-right">$3,722,219</td>
<td class="align-right">$1,551,948</td>
<td class="align-right">$2,208,306</td>
</tr>
<tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
KPIs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
<td>testdata</td>
</tr>
</thead>
<tbody>
<tr>
<td>testdata</td>
<td class="align-right">20</td>
<td class="align-right">294</td>
<td class="align-right">78</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">5</td>
<td class="align-right">93</td>
<td class="align-right">20</td>
<td class="align-right">0</td>
<td class="align-right">0</td>
<td class="align-right">0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">25</td>
<td class="align-right">387</td>
<td class="align-right">98</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
<td class="align-right">25</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">262</td>
<td class="align-right">3,897</td>
<td class="align-right">483</td>
<td class="align-right">365</td>
<td class="align-right">314</td>
<td class="align-right">292</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">508</td>
<td class="align-right">18,202</td>
<td class="align-right">2,923</td>
<td class="align-right">905</td>
<td class="align-right">320</td>
<td class="align-right">1,681</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">4,135</td>
<td class="align-right">106,400</td>
<td class="align-right">12,619</td>
<td class="align-right">5,640</td>
<td class="align-right">6,068</td>
<td class="align-right">6,194</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">97.0</td>
<td class="align-right">67.9</td>
<td class="align-right">101.0</td>
<td class="align-right">74.0</td>
<td class="align-right">73.1</td>
<td class="align-right">78.0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">8.1</td>
<td class="align-right">5.8</td>
<td class="align-right">4.3</td>
<td class="align-right">6.2</td>
<td class="align-right">19.0</td>
<td class="align-right">3.7</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">$40,461,722</td>
<td class="align-right">$873,011,359</td>
<td class="align-right">$141,256,885</td>
<td class="align-right">$50,531,469</td>
<td class="align-right">$45,789,348</td>
<td class="align-right">$49,471,774</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">11.3</td>
<td class="align-right">291.5</td>
<td class="align-right">34.6</td>
<td class="align-right">15.5</td>
<td class="align-right">16.6</td>
<td class="align-right">17.0</td>
</tr>
<tr>
<td>testdata</td>
<td class="align-right">45.3%</td>
<td class="align-right">75.3%</td>
<td class="align-right">35.3%</td>
<td class="align-right">61.8%</td>
<td class="align-right">66.5%</td>
<td class="align-right">67.9%</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
答案 1 :(得分：0)
首先：您添加了相同的id？不，你不这样做。 Id是独一无二的，重复它们是一件坏事。
为表格提供唯一标识，然后按照your plugin site：
中的说明操作//according to the site: this should make your table searchable
$(document).ready(function(){
$('#myTable').DataTable();
});
//have you called the js files and css for the plugins ?
//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？