Datatables 动态计算数据表中的百分比
应用搜索时，如何动态计算数据表中的百分比？ 结果应该是这样的：Datatables 动态计算数据表中的百分比,datatables,Datatables,应用搜索时，如何动态计算数据表中的百分比？ 结果应该是这样的： <tr> <td>10%</td><td>100</td> <td>90%</td><td>900</td> </tr> 10%100 90%900 百分比应基于显示的行总数。以下示例向您展示了一种基本方法 最终结果如下所示-注意，在对百分比求和时，可能会出现一个小的舍入误差： 代码如下： 更新-我原来的解
<tr>
<td>10%</td><td>100</td>
<td>90%</td><td>900</td>
</tr>
10%100
90%900
百分比应基于显示的行总数。以下示例向您展示了一种基本方法 最终结果如下所示-注意，在对百分比求和时，可能会出现一个小的舍入误差： 代码如下： 更新-我原来的解决方案有一个问题-它使用jQuery用计算出的百分比填充数据表单元格。这意味着DataTables不响应百分比列的排序/筛选。最好使用DataTables函数来填充数据单元
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>ID</th><th>Amount</th><th>Percent</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>123.4</td><td class="percent"></td></tr>
<tr><td>2</td><td>234.5</td><td class="percent"></td></tr>
<tr><td>3</td><td>543.21</td><td class="percent"></td></tr>
<tr><td>4</td><td>76</td><td class="percent"></td></tr>
<tr><td>5</td><td>87</td><td class="percent"></td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
// wait for table and data to finish being initialized:
"initComplete": function( settings, json ) {
populatePercentages();
}
});
function populatePercentages() {
var total = 0.0;
// first calcuate the total:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
// assumes amounts are not null, all numeric, and are in column 2:
total = total + Number(this.data()[1]);
});
// then calculate the percentage for each row:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var amount = this.data()[1];
// calculate percent to 2 decimal places:
var percentage = Math.round((amount / total) * 10000) / 100;
var cells = $('#example').DataTable().cells(rowIdx, 2);
cells.every( function () {
this.data(percentage);
});
});
}
});
</script>
</body>
以下示例向您展示了一种基本方法 最终结果如下所示-注意，在对百分比求和时，可能会出现一个小的舍入误差： 代码如下： 更新-我原来的解决方案有一个问题-它使用jQuery用计算出的百分比填充数据表单元格。这意味着DataTables不响应百分比列的排序/筛选。最好使用DataTables函数来填充数据单元
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>ID</th><th>Amount</th><th>Percent</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>123.4</td><td class="percent"></td></tr>
<tr><td>2</td><td>234.5</td><td class="percent"></td></tr>
<tr><td>3</td><td>543.21</td><td class="percent"></td></tr>
<tr><td>4</td><td>76</td><td class="percent"></td></tr>
<tr><td>5</td><td>87</td><td class="percent"></td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
// wait for table and data to finish being initialized:
"initComplete": function( settings, json ) {
populatePercentages();
}
});
function populatePercentages() {
var total = 0.0;
// first calcuate the total:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
// assumes amounts are not null, all numeric, and are in column 2:
total = total + Number(this.data()[1]);
});
// then calculate the percentage for each row:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var amount = this.data()[1];
// calculate percent to 2 decimal places:
var percentage = Math.round((amount / total) * 10000) / 100;
var cells = $('#example').DataTable().cells(rowIdx, 2);
cells.every( function () {
this.data(percentage);
});
});
}
});
</script>
</body>
感谢您提供的精彩详细的分步回答。我成功地实现了这一点。请注意，对于其他可能在这方面遇到障碍的人，您需要在populatePercentages函数中实现keyup事件捕捉器，否则它将不会被注册，我猜，因为表还没有完成加载。再次感谢。接下来，当然你不能将过滤器捕获放在populatePercentages函数中，除非你处理递归…@guillottim-我在回答中澄清了（不清楚！）的措辞，以显示事件侦听器代码应该放在哪里。谢谢，只是为了提醒一下，这对我不起作用（可能是我写错了，也可能是代码执行时数据表还没有生成），我所做的是将其包装在一个函数中，该函数是在datatable初始化之后执行的。感谢您提供的精彩详细的分步回答。我能够成功地实现这一点。请注意，对于可能在这方面遇到障碍的其他人，您需要在populatePercentages函数中实现keyup事件捕捉器，否则我想它不会被注册，因为表还没有完成加载。再次感谢。接下来，当然，除非处理递归，否则不能将过滤器捕获放在populatePercentages函数中…@guillottim-我澄清了（不清楚！）在我的回答中，用词来显示事件侦听器代码应该放在哪里。谢谢，只是为了提醒我这对我不起作用（可能是我写错了，或者可能是在代码执行时数据表还没有生成），我所做的是将它包装在一个函数中，我在数据表的init之后执行该函数。