Multiplying a columns data by an external input and then displaying those results in a new column.

RowanReed

I have a price list in my laravel project which has a Retail Price column for the products. I want to calculate a Discount Price for these products by inputting a decimal through a text input in order to give a percentage of the Retail price. I then want to put these values in a new column for discounted price.

Decimal input:

<div>
      <button class="discbtn">Go!</button>
</div>

 <div class="discinput">
      <label>Discount Multiplier:</label>
      <input id="disc" type="text" name="dc" style="text-align: right" placeholder="Discount e.g. .2 for 20%" />
</div>

HTML for the table:

<table id="stand">
    <thead>
          <tr>
              <th>
                  Part Number
              </th>
              <th>
                  Description
              </th>
              <th>
                  Cost Price
              </th>
              <th>
                  Retail Price
              </th>
              <th>
                  Discount Price
              </th>
              <th>
                  Notes
              </th>
            </tr>
         </thead>
       <tbody>
       @foreach($entries as $entry)
           <tr>
              <td>
                 {{$entry->pn}}
              </td>
              <td>
                 {{$entry->desc}}
              </td>
              <td>
                 {{$entry->cp}}
              </td>
              <td>
                 {{$entry->rp}}
              </td>
              <td>

              </td>
              <td>
                 {{$entry->notes}}
              </td>
           </tr>
        @endforeach
   </tbody>
</table>

JS for the DataTable:

$(document).ready(function() {
        $.noConflict();
        var standdt = $('#stand').DataTable({
            paging: false,
            scrollY: 400,
            scrollX: true,
        });

JS for my input and getting the data from the column:

        $(".discbtn").click(function () {
            var discPerc = $("#disc").val();
            var discData = standdt.column(3).data()
        });
    });

Im not sure where to go from here because I dont know whether there is a function which I can use in DataTables to help with my problem.

tangerine

I don't really understand. Are you saying that the discount factor is entered by the user? If so, don't you need some kind of validation?

RowanReed

Yes the user will enter a decimal of .2 for a 20% discount

kthorngren

Use columns.render to perform the calculation. The docs have examples plus you can see an example here. You can create a change event for the input to redraw the table, for example:

var discValue = `;  // Global variable for the input value.
$('#disc').on('change', function () {
  discValue = $(this).val();
  // Validate the input
  
  standdt.rows().invalidate().draw( false );
});

I didn't try this so there may be errors. Use rows().invalidate() to force Datatables to execute the columns.render function. The false parameter will stay on the same page after the draw().

Kevin