首页 文章

对jQuery Datatables中的所有选定行求和

提问于
浏览 次
0

我有一个数量列，并使用此https://datatables.net/examples/advanced_init/footer_callback.html计算页面和页面的总数到页脚 .

此示例还提示页面和页面上的总金额 . https://datatables.net/examples/plug-ins/api.html

我想要实现的是如何将工资列的选定行的值相加

这是我在jsfiddle上构建的一个，完成了行选择并完成了一个页脚 .

但我无法弄清楚如何在左下角单元格中添加所选行总数的和值

http://jsfiddle.net/ebRXw/190/

$('#example').dataTable( {
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // 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;
        };

        // Total over all pages
        total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );

        // Total over this page
        pageTotal = api
            .column( 4, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 4 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

$('#example tbody').on('click', 'tr', function () {

    $(this).toggleClass('selected');
} );
javascript jquery datatable

4 回答

  • 0

    试试这个Working Demo

    $('#example tbody').on('click', 'tr', function () {

        $(this).toggleClass('selected');
        $('#button').trigger('click');
        console.log($('tfoot tr > th').eq(1).html( '$'+ $('#selectedtotal').html()));        

    });
    回复于
  • 0
    var totalSUM = 0;
$("tbody tr.selected").each(function () {
    var getValue = $(this).find("td:eq(4)").html().replace("$", "");
    var filteresValue = getValue.replace(/\,/g, '');
    totalSUM += Number(filteresValue)
    console.log(filteresValue);
});
alert(totalSUM);

    JS FIDDLE

    回复于
  • 1

    在 th 元素中添加一个 .sum 类，显示总和 . 另外，创建一个 sum 变量并在javascript代码的顶部对其进行初始化 . 然后，更改将 selected 类切换为此的代码：

    $('#example tbody').on('click', 'tr', function () {

        var price = parseInt(($(this).find('td').last().html()).replace(/\$|,/g, ''));
        if($(this).hasClass('selected')) {
           sum -= price;
        } else {
           sum += price;
        }
        $('.sum').html(sum);
        $(this).toggleClass('selected');
} );

    这是一个工作JFiddle

    回复于
  • 0

    您可以通过 $(this)[0].classList.contains("selected") 检查是否已选择行 . 然后将行 $(this).find(':nth-child(5)') 的第5列的数量添加到 $('sum') 的数量：

    if($(this)[0].classList.contains("selected"))
{
        $('#sum').html(
            parseFloat($('#sum').html()) + 
            parseFloat($(this).find(':nth-child(5)').html().replace(/[$,]/g, "")));
}

else
{
        $('#sum').html(
        parseFloat($('#sum').html()) -
        parseFloat($(this).find(':nth-child(5)').html().replace(/[$,]/g, "")));
}

    这是一个DEMO

    回复于

相关问题