gpt4 book ai didi

javascript - 将不同 div 标签内的多个表转换为可排序/可搜索的表

转载 作者:行者123 更新时间:2023-12-03 09:51:35 24 4
gpt4 key购买 nike

我在一页上有很多表格。但是,只有第一个表是可排序/可搜索的。我想将所有表格转换为可排序/可搜索的表格。我确保它们都有相同的类和相同的 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>

以下是一些屏幕截图:

enter image description here enter image description here

我不知道为什么只有第一个表是可排序/可搜索的,而不是全部。任何帮助将不胜感激!谢谢!

最佳答案

鉴于您发布的代码是您实际使用的代码,并引用了 jQuery、jQuery dataTables、jQuery dataTable css 以及看起来像 Bootstrap 的内容,因此一切都应该就位。

jQuery dataTables 附带开箱即用的排序/过滤功能(以及许多其他有用的功能),因此您实际上不需要做太多配置即可。

这是您的代码有效的证据。我会确保在加载 dataTables 之前加载 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>

关于javascript - 将不同 div 标签内的多个表转换为可排序/可搜索的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30874806/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com