我想制作一张桌子,以帮助我进行价格比较。 说明: 在我的桌子上有:
在我的情况下,理想的选择是选择要保留的行以查看选择的总价。所以我可以看到不同选项的成本。
有人会有想法或已经遇到了这个问题吗?
感谢您的帮助:)
编辑每列的总和可以正常工作,但是当我找不到如何只选择每列的总和时,就无法使用它们。 抱歉,但是我对js不满意:-/
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
$(document).ready(function() {
var table = $('#example').DataTable( {
columnDefs: [{
targets: [4,5,6,8,9,10],
render: $.fn.dataTable.render.number(',', '.', 2)
}],
responsive: true,
paging:false,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var sumColumns = [4,5,6,8,9,10];
sumColumns.forEach(function(colIndex){
// Total over all pages
var total = api
.rows({ selected: true })
.column(colIndex)
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
var pageTotal = api
.column(colIndex, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.columns(colIndex).footer() ).html(
total
);
})
},
});
});
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/>
<div id="page">
<h1>Contacts</h1>
<table id="example" class="display nowrap table1" cellspacing="0" width="100%">
<thead>
<tr>
<th>projectid</th>
<th>productid</th>
<th>manufacturerid</th>
<th>title</th>
<th>quantity</th>
<th>PAU a</th>
<th>PAT a</th>
<th>Coef a</th>
<th>PVU a</th>
<th>PVT a</th>
<th>Profit a</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>5</td>
<td>5</td>
<td>Title 1</td>
<td>10</td>
<td>130</td>
<td>1300</td>
<td>2</td>
<td>260</td>
<td>2600</td>
<td>1300</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>6</td>
<td>Title 2</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>2</td>
<td>200</td>
<td>2000</td>
<td>1000</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>5</td>
<td>Title 3</td>
<td>10</td>
<td>50</td>
<td>500</td>
<td>2</td>
<td>100</td>
<td>1000</td>
<td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>PAU a</th>
<th>PAT a</th>
<th></th>
<th>PVU a</th>
<th>PVT a</th>
<th>Profit a</th>
</tr>
</tfoot>
</table>
</div>
答案 0 :(得分:0)
我编写了一个函数来计算您的列和第七列的平均值, 这与您的代码是分开的,您可以在任何需要的地方使用它。
jQuery(document).ready(function($) {
var sumColumns = [4,5,6,8,9,10];
$.each(sumColumns, function(index, val) {
var total = 0;
jQuery('tbody tr td:nth-child('+val+')').each(function(index, el) {
total += parseInt($(this).html());
});
jQuery('tfoot tr th:nth-child('+val+')').each(function(index, el) {
$(this).html(total);
});
});
var total = 0;
jQuery('tbody tr td:nth-child(7)').each(function(index, el) {
total += parseInt($(this).html());
});
jQuery('tfoot tr th:nth-child(7)').each(function(index, el) {
$(this).html(total/jQuery('tbody tr td:nth-child(7)').length);
});
});