jQuery Plugin For Online CSV Data Calculation - csv-calc

File Size: 9.56 KB
Views Total: 4351
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Online CSV Data Calculation - csv-calc

csv-calc is a lightweight jQuery plugin that loads an external CSV file via AJAX and performs the calculation based on the user input.

How to use it:

1. Download and place the jQuery csv-calc plugin's script after you've added jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.csv-calc.js"></script>

2. Assume that you have a CSV file containing 'id', 'product name' and 'price' columns like this:

id      name        price
ABC-001 Product001  800
ABC-002 Product002  1500
ABC-003 Product003  1200
XYZ-001 Product004  2000
XYZ-002 Product005  2800
XYZ-003 Product006  3000

3. Create an empty table to present your CSV data.

<table id="products">
  <tr class="th">
    <th>id</th>
    <th>name</th>
    <th>price</th>
    <th>amount</th>
    <th>sum</th>
  </tr>
  <tr class="product-info" data-csvcalc-repeat>
    <td data-csvcalc-cell="0" data-csvcalc-id></td>
    <td data-csvcalc-cell="1"></td>
    <td data-csvcalc-cell="2" data-csvcalc-price class="price"></td>
    <td><input data-csvcalc-input class="amount" type="number" min="0" value="0"></td>
    <td data-csvcalc-sum class="sum">0</td>
  </tr>
  <tr class="th">
    <th colspan="4" class="th-total">total</th>
    <td data-csvcalc-total class="total">0</td>
  </tr>
</table>

4. Call the plugin on the table and specify the path to your CSV file.

$('#products').csvCalc('products.csv');

5. Possible plugin options.

$('#products').csvCalc('products.csv',{
  line_endings: '\n',
  ignore_first_line: true,
  ignore_last_line: true,
  only_integer: true
});

This awesome jQuery plugin is developed by sutara79. For more Advanced Usages, please check the demo page or visit the official website.