Javascript/jQuery/Datatables合計値がチェックボックスによってトリガーされる

Question

javascriptを正しく修正する方法がわかりません。私の目標は、チェックされた行だけを集めてテーブルフッタに合計値を入れることです。単一行の選択はうまくいきますが、theadチェックボックスを使用して表示されたすべての行に 'checked'プロパティを追加すると、アクションはトリガーされません。ここに私のコードは次のとおりです。CodeIgniterの中

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> 

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 提案？ 私の問題を読んで解決するのに時間がかかる皆様に感謝します。 Andy

Answer 1

サーバー側の#sumcheckedにHTMLコードを生成し、属性をvisibility: hiddenにする方が簡単です。行を選択すると、選択したすべての行を毎回実行する必要はありません。 DOMのトラバースを最小限に抑えるには、総合計の現在の値を要求し、選択したアイテムの価格を追加/減算する方が良いです。選択したすべてのアイテムの合計を取得するには、の値を#checked-prices-total-sumに挿入するだけです。

は例えば、私は価格だけの列を使用して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>