jQuery plug-in for calculation of CSV data by AJAX: in Table and XML

Performing calculation in HTML table by jQuery plug-in

In this tutorial, a jQuery plug-in is used that loads a CSV file by using the AJAX call. The data is loaded in an HTML table where id, name, price, amount and sum columns are displayed.

The amount field can be changed by the user while the sum is the total of price multiply by amount. The calculation is done by using jQuery plug-in, jquery.csv-calc that you may download here.  Practically, you may use this for other field combinations as well by modifying the table and, if required, the JS file.

Have a look at demos and how to set up this plug-in along with specifying the CSV file.

A demo of displaying and performing calculations

The CSV file is specified in the jQuery code under the <script> tag. The HTML table column heads are created normally. The second row, i.e. table data are assigned data attributes, data-csvcalc-cell, with respective to columns in CSV file. Note, for the demo, the CSV file placed at the same location where script file is stored.

See online demo and code

For setting up this plug-in, include the plug-in and jQuery JS files in the web page. You also need to include the style file for the table. You may use your custom style there as well (See the last example).

<link rel=”stylesheet” href=”css/jquery.csv-calc/demo-01.css”>

<script src=”//code.jquery.com/jquery-2.2.3.min.js”></script>

<script src=”js/jquery.csv-calc/jquery.csv-calc.js”></script>

Specify the CSV file in the jQuery code:

In the markup section, simply create an HTML table with the table head and along with required data attributes. See the complete code in the demo page.

Using XML with plug-in demo

Not only you may you use HTML tables for displaying calculated data using this plug-in but XML as well.

In this demo, the combination of <dl> and <dt> tags are used with the plug-in for allowing to select the amount and displaying the sum of price and amount.

See online demo and code

Following is the markup used:

Styling with the custom CSS demo

As mentioned earlier, whether you are using table or XML, you may use your own custom CSS to match it with the other sections of your website. For that, simply replace the demo-1 or demo-2 files in example 1 and 2, respectively.

In this demo, I have created a demo-custom.css file and used it with the table (first example). Have a look at the code and output:

See online demo and code

Following is the style used in the demo-custom.css files: