Javascript/jQuery/Datatables 对复选框触发的值求和

Posted 2023-05-09

【中文标题】Javascript/jQuery/Datatables 对复选框触发的值求和

【英文标题】：Javascript/jQuery/Datatables sum values triggered by checkboxes

【发布时间】：2018-04-17 20:23:14

【问题描述】：

我不知道如何更正我的 javascript 以使其正常工作。我的目标是在表页脚中有一个值的总和，只选择选中的行。单行选择工作正常，但使用 thead 复选框将“已选中”属性添加到显示的每一行不会触发操作。这是我的代码：

Javascript

 //check all
    $("#check-all").click(function () 
        $(".data-check").prop('checked', $(this).prop('checked'));
    );

    $('#sumchecked').html('KG selezione: ');

    $('#inventario', 'thead').on('change', 'input[type="checkbox"]', function()
        var totalSUM = 0;
        $('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));

        $('tr:has(:checked)').each(function () 
            var getValue = parseFloat($(this).find("td:eq(3)").html().replace(",", "."));
            totalSUM += getValue;

            $('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));

        );
    );

HTML 标记

<table id="inventario" class="table table-bordered table-striped table-hover">
            <thead>
              <tr>
                 <th><input type="checkbox" id="check-all"></th>
                 <th>N° Collo</th>
                 <th>Ordine</th>
                 <th>KG</th>
                 <th>Operatore</th>
                 <th><span style="font-size:1.5em;" title="Cimosa" class="icon-scissors-cutting-by-broken-line"></span></th>
                 <th><span style="font-size:1.5em;" title="Specola" class="icon-silk"></span></th>
                 <th>Falli</th>
                 <th>Note</th>
                 <th>Data Produzione</th>
                 <th>Stato</th>
                 <th>Consegna</th>
                 <th>Azioni</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
        <tr>
            <th></th>
            <th><div id="sumchecked"></div></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
    </table>

Codeigniter中的php控制器，用于生成表数据的ajax_list函数

 public function ajax_list()

    $list = $this->packing->get_datatables();
    $data = array();
    $no = $_POST['start'];
    foreach ($list as $pezza) 
        $no++;
        $row = array();
        $row[] = '<input type="checkbox" class="data-check" value="'.$pezza->n_pezza.'">';
        $row[] = $pezza->n_pezza;
        $row[] = $pezza->ID_ordine;
        $row[] = number_format($pezza->kg_pezza,3,",",".");
        $row[] = $pezza->nome_operatore;
        if($pezza->selvedge == '1')
            $row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
        else
            $row[] = '';
        
        if($pezza->specola == '1')
            $row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
        else
            $row[] = '';
        
        $row[] = $pezza->falli;
        $row[] = $pezza->note;
        $row[] = $this->conversione1($pezza->data);
        if ($pezza->stato == '1')
            $row[] = '<span style="font-size:1.5em;" title="Consegnata"class="icon-logistics-delivery-truck-in-movement"></span>';
            $row[] = $this->conversione2($pezza->data_consegna);
        else
            $row[] = '<span style="font-size:1.5em;" title="Magazzino" class="icon-warehouse"></span>';
            $row[] = '';
        

        $row[] = '<div class="btn-group btn-group-justified" style="width:136px">
                  <a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Modifica" onclick="modifica_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-pencil"></i></a>
                  <a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Info Filati" onclick="info_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-info-sign"></i></a>
                  <a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Cancella" onclick="cancella_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-trash"></i></a>
                  </div>';

        $data[] = $row;
    

    $output = array(
                    "draw" => $_POST['draw'],
                    "recordsTotal" => $this->packing->count_all(),
                    "recordsFiltered" => $this->packing->count_filtered(),
                    "data" => $data,
            );
    //output to json format
    echo json_encode($output);

如果我选中标题中的第一个复选框，这是我的输出 output sum checkboxes 建议？ 感谢所有愿意花时间阅读并解决我的问题的人。 安迪

【问题讨论】：

HTML 的其余部分...以及当前输出

【参考方案1】：

在服务器端在#sumchecked 中生成HTML 代码并将visibility: hidden 属性添加到它更容易。当您选择一行时，您不需要每次都遍历所有选定的行。为了尽量减少 DOM 遍历，最好请求总和的当前值，然后将所选项目的价格加/减到其中。要获得所有选定项目的总和，只需在#checked-prices-total-sum 中插入来自#totalkg 的值。

例如，我从您的 HTML 表中提取了 3 行仅包含价格列的行，并更改了您的脚本代码：

$(document).ready(function() 
    $("#check-all").click(function() 
        var isChecked = $(this).prop('checked');
        $(".data-check").prop('checked', isChecked);
        var $sumchecked = $('#sumchecked');
        var $totalSum = $('#checked-prices-total-sum');

        if (isChecked) 
            $totalSum.html($('#totalkg').html());
            $sumchecked.css('visibility', 'visible');
         else 
            $totalSum.html(0);
            $sumchecked.css('visibility', 'hidden');
        
    );

    $('#inventario-data').on('change', 'input[type="checkbox"]', function()
        var $sumchecked = $('#sumchecked');
        var $totalSum = $('#checked-prices-total-sum');
        var totalSumValue = parseFloat($totalSum.html());
        var price = parseFloat($(this).parent().next().next().html().replace(",", "."));

        if ($(this).is(':checked')) 
            totalSumValue += price;
         else 
            totalSumValue -= price;
        

        $totalSum.html(totalSumValue.toFixed(3));
        totalSumValue > 0 ? $sumchecked.css('visibility', 'visible') : $sumchecked.css('visibility', 'hidden');
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="inventario" class="table table-bordered table-striped table-hover">
    <thead>
    <tr>
        <th><input type="checkbox" id="check-all"></th>
        <th>N° Collo</th>
        <th>Ordine</th>
    </tr>
    </thead>
    <tbody id="inventario-data">
    <tr>
        <td><input type="checkbox" class="data-check"></td>
        <td>test</td>
        <td>10,200</td>
    </tr>
    <tr data-rowid="2">
        <td><input type="checkbox" class="data-check"></td>
        <td>test</td>
        <td>30,400</td>
    </tr>
    <tr data-rowid="3">
        <td><input type="checkbox" class="data-check"></td>
        <td>test</td>
        <td>50,600</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th></th>
        <th><div id="sumchecked" style="visibility: hidden;">KG selezione: <span id="checked-prices-total-sum">0</span></div></th>
        <th>Tot. KG <span id="totalkg">91,200</span></th>
    </tr>
    </tfoot>
</table>

【讨论】：

好主意！我会在修复我的 *** 后立即对其进行测试，但我确信这对我来说没问题。我认为意大利符号“，”代表“。”的 parseFloat 值存在一些问题，无论如何它不是价格列，而是以千克为单位的重量列。非常感谢您的提示，它真的为我节省了一天:-)

我今天检查了所有内容，它就像一个魅力。我刚刚编辑了几个 Javascript 行，在这些行中我提供了 Datatables API 坐标来放置总公斤数。非常感谢！

@AndyBiancoblu 不客气！我很高兴能帮上忙。