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.

RowanReedRowanReed Posts: 2Questions: 1Answers: 0

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

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    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?

  • RowanReedRowanReed Posts: 2Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

This discussion has been closed.