Multiplying a columns data by an external input and then displaying those results in a new column.
Multiplying a columns data by an external input and then displaying those results in a new column.
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.
Answers
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?
Yes the user will enter a decimal of .2 for a 20% discount
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:I didn't try this so there may be errors. Use
rows().invalidate()
to force Datatables to execute thecolumns.render
function. Thefalse
parameter will stay on the same page after the draw().Kevin