File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
​
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/dataTables.bootstrap5.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.css" integrity="sha512-g4B+TyvVE4aa0Y1SgjMHnT/4M4IRl8jnG3Ha9ebg8VhLyrfaAqL5AHDh7zo0/ZdES57Y1E7wvWwsDzX806b1Gw==" crossorigin="anonymous" />
​
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>       
  
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.4.0/js/responsive.bootstrap5.js"></script>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.js" integrity="sha512-0hFHNPMD0WpvGGNbOaTXP0pTO9NkUeVSqW5uFG2f5F9nKyDuHE3T4xnfKhAhnAZWZIO/gBLacwVvxxq0HuZNqw==" crossorigin="anonymous"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - avec quantité input (tocuhspin)</title>
  </head>
  <body>
    <div class="container">
      <table id="tableliste" class="table table-striped table-bordered display dataTable">
        <thead>
          <tr>
            <th class="text-center">Réf</th>
            <th class="text-center">Libellé du produit</th>
            <th class="text-center">Evènement</th>
            <th class="text-center">Pays</th>
            <th class="text-center">Prix (€ TTC)</th>
            <th class="text-center">Quantité</th>
            <th class="text-center">sous-total (hidden)</th>
          </tr>
        </thead>
        <tbody id="tbodyresult">
          <tr>
            <td class="text-center">ref0001</td>
            <td class="font-weight-bold ">Produit 1</td>
            <td class="text-center">Salon 2023</td>
            <td class="text-center">Hawaï</td>
            <td class="text-center">18</td>
            <td class="py-0 text-center align-middle td-qte" width="130px">
              <input type="text" name="qte-produit" value="1" class="qte-produit form-control text-center px-0 h-100">
            </td>
            <td></td>
          </tr>
          <tr>
            <td class="text-center">ref0002</td>
            <td class="font-weight-bold ">Produit 2</td>
            <td class="text-center">Salon 2023</td>
            <td class="text-center">Népal</td>
            <td class="text-center">25</td>
            <td class="py-0 text-center align-middle td-qte" width="130px">
              <input type="text" name="qte-produit" value="1" class="qte-produit form-control text-center px-0 h-100">
            </td>
            <td></td>
          </tr>        </tbody>
        <tfoot>
          <tr>
            <th colspan="4" style="text-align:right">Total TTC:</th>
            <th class="text-center"></th>
            <th></th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
</html>
​
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
var col_prix = 4; //Colonne prix
var col_total = 4; //Colonne total footer
var col_qte = 5;
var col_soustotal = 6; //Colonne sous-total
​
$(".qte-produit").TouchSpin();
​
//var table = new DataTable('#tableliste');
var table = $('#tableliste').DataTable({
  language: {
    url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
  },
  initComplete: function () {
  },
  responsive: true,
  paging: false,
  info: false,
  ordering: true,
  columnDefs: [
    { targets: col_prix, render: $.fn.dataTable.render.number(null, null, 2) },
    {
      targets: col_soustotal,
      render: function(data, type, row, meta) {
        //console.log("data", data, "type", type, "row", row, "meta", meta);
​
        var prixval = Number(row[col_prix].replace(",",".")); //Si decimal
        var inputrow = $(row[col_qte]).find("input"); //input col_qte
        var qte = inputrow.val(); //Valeur col_qte
​
        console.log(prixval, qte, qte * prixval);
​
        return qte * prixval;
      },
      //visible: false
​
    },
  ],
  order: [[ 1, "asc" ]],
  responsive: {
    details: {
      display: $.fn.dataTable.Responsive.display.childRow, //Permet de ne pas afficher les colonnes manquantes en dessous
      type: 'none',
      target: 'none'
    }
  },
  fixedHeader: true,
  footerCallback: function (row, data, start, end, display) {
    console.log("****** fn footerCallback ******");
    var prix_total = 0;
    var qte_total = 0;
    var api = this.api();
    console.log("data", data, "display", display);
​
    // Total over this page
    pageTotal = api
      .column(col_soustotal, { page: 'current' })
      .data()
      .reduce(function (a, b) {
        a = Number(a);
        b = Number(b);
        console.log("a", a, "b", b);
        
        return a + b;
      }, 0);
​
    pageTotal = $.fn.dataTable.render.number('.', ',', 2, '', '&euro;').display(pageTotal);
    console.log("pageTotal", pageTotal);
​
    // Update footer
    $(api.column(4).footer()).html(pageTotal);
  },                        
});
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers