DataTables - 如何获取 html 表中列的百分比
[英]DataTables - how to get the percentage of a column in html table
问题描述
我在计算获取数据表的 html 表中列的百分比时遇到了困难。
在上表中，我已经弄清楚了如何获得每列的总和，但对于“D 列”总计，我需要得到百分比，即“（B 列的总数/C 列的总数）* 100。 F 列也将是（E 列的总和/A 列的总和），而不是现在显示的总和。
D 列的总数为空白，因为我使用的 javascript 代码无法汇总 D 列，因为我使用的是百分号。 因此，使用我当前的代码，我想对 A、B、C、E、G 列和 D 列的百分比求和，F 列将是 E 列除以 A 列。
我如何 go 使用 Datatables 和 javascript 来计算这些总数？ 任何帮助将不胜感激。 谢谢你。
$(document).ready(function() { // DataTable initialisation $('table.off-table1').DataTable({ "searching": false, "info": false, "paging": false, "autoWidth": true, "footerCallback": function ( row, data, start, end, display ) { var api = this.api(); nb_cols = api.columns().nodes().length; var j = 1; while(j < nb_cols){ var pageTotal = api.column( j, { page: 'current'} ).data().reduce( function (a, b) { return Number(a) + Number(b); }, 0 ); // Update footer $( api.column( j ).footer() ).html(pageTotal); j++; } } }); });
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/fc-3.3.1/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sp-1.1.1/sl-1.3.1/datatables.min.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/fc-3.3.1/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sp-1.1.1/sl-1.3.1/datatables.min.js"></script> <style> </style> </head> <table id="def-table1" class="def-table1" cellspacing="0" width="100%"> <thead> <tr> <th scope="col">ID</th> <th scope="col">A</th> <th scope="col">B</th> <th scope="col">C</th> <th scope="col">D%</th> <th scope="col">E</th> <th scope="col">F</th> <th scope="col">G</th> </tr> </thead> <tfoot> <tr> <td>Totals</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td class="minutes">41</td> <td class="minutes">14</td> <td class="minutes">33</td> <td class="minutes">42.4 %</td> <td class="minutes">42</td> <td class="minutes">1.02</td> <td class="minutes">8</td> </tr> <tr> <td>2</td> <td class="minutes">8</td> <td class="minutes">2</td> <td class="minutes">6</td> <td class="minutes">33.3 %</td> <td class="minutes">5</td> <td class="minutes">0.63</td> <td class="minutes">1</td> </tr> <tr> <td>3</td> <td class="minutes">29</td> <td class="minutes">11</td> <td class="minutes">25</td> <td class="minutes">44.0 %</td> <td class="minutes">33</td> <td class="minutes">1.14</td> <td class="minutes">5</td> </tr> <tr> <td>4</td> <td class="minutes">7</td> <td class="minutes">1</td> <td class="minutes">5</td> <td class="minutes">20.0 %</td> <td class="minutes">5</td> <td class="minutes">0.71</td> <td class="minutes">1</td> </tr> </tbody> </table>
1 个解决方案
解决方案1
1 已采纳 2021-04-18 04:05:09
我通过不使用this.api()并且仅使用传递给回调的 arguments 和一些基本数组方法来简化这一点。 现在应该更容易使用
function tfootTotals(tfRow, data, start, end, display) { // display is array of data indices that are included in this view const pageData = data.filter((arr, i) => display.includes(i)); // create array of column totals const totals = Array.from(pageData[0]).fill(0); pageData.forEach(arr => arr.forEach((e, i) => totals[i] += (+e) || 0)); // calculate the special ones totals[4] = (100 * totals[2] / totals[3]).toFixed(1) + '%'; totals[6] = totals[5] / totals[1]; // set the tfoot cell text. slice ignores first one // so indexing is one less than totals array $(tfRow.cells).slice(1).text(i => totals[i+1]) // console.log(totals) } // DataTable initialisation $('#def-table1').DataTable({ "searching": false, "info": false, "paging": false, "autoWidth": true, "footerCallback": tfootTotals });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script> <table id="def-table1" class="def-table1" cellspacing="0" width="100%"> <thead> <tr> <th scope="col">ID</th> <th scope="col">A</th> <th scope="col">B</th> <th scope="col">C</th> <th scope="col" class="col-d">D%</th> <th scope="col">E</th> <th scope="col" class="col-f">F</th> <th scope="col">G</th> </tr> </thead> <tfoot> <tr> <td>Totals</td> <td></td> <td></td> <td></td> <td>ff</td> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td class="minutes">41</td> <td class="minutes">14</td> <td class="minutes">33</td> <td class="minutes">42.4 %</td> <td class="minutes">42</td> <td class="minutes">1.02</td> <td class="minutes">8</td> </tr> <tr> <td>2</td> <td class="minutes">8</td> <td class="minutes">2</td> <td class="minutes">6</td> <td class="minutes">33.3 %</td> <td class="minutes">5</td> <td class="minutes">0.63</td> <td class="minutes">1</td> </tr> <tr> <td>3</td> <td class="minutes">29</td> <td class="minutes">11</td> <td class="minutes">25</td> <td class="minutes">44.0 %</td> <td class="minutes">33</td> <td class="minutes">1.14</td> <td class="minutes">5</td> </tr> <tr> <td>4</td> <td class="minutes">7</td> <td class="minutes">1</td> <td class="minutes">5</td> <td class="minutes">20.0 %</td> <td class="minutes">5</td> <td class="minutes">0.71</td> <td class="minutes">1</td> </tr> </tbody> </table>
如何将 HTML 表格列宽设置为百分比（表格页脚不影响表格正文）？
[英]How to set HTML table column widths as a percentage (without table footer affecting table body)?
jQuery数据表-如何在表中具有html标记的列中搜索文本？
[英]jQuery datatables-how to search text in column that has html tags in a table?
如何将html表的最后一列的宽度设置为可用宽度的百分比？
[英]How can I set the width of the last column of an html table to a percentage of the available width?
Datatables：在drawCallBack之后用Angular编译表HTML时，如何使分页工作？
[英]Datatables : How to get pagination working when table HTML is compiled with Angular after drawCallBack?
我如何使用Angularjs和Datatables在html表中显示数据
[英]How can i use Angularjs and Datatables to display data in an html table
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.