Search code examples
jqueryajaxcsvdatatablesjquery-csv

How do I modify DataTables columns from CSV AJAX request?


I am populating a DataTable with data from a CSV file. There is some macro logic coming from the file (i.e. column2 = column1 * 3, column4 = column3 * 3...).

I am making an AJAX request to get the data from the CSV file, and using jQuery CSV library to parse through the file before populating the table.

How can I apply the multiplication logic to some of the columns in the table?

$.ajax({
    url: "../data/data.csv",
    dataType: "text",
    cache: false,
    success: function(csvs){
        data = $.csv.toObjects(csvs);
        table.rows.add(data).draw();
    }
});

var table = $('#totals-table').DataTable({
dom: '<"top"Bf>rt<"bottom"lp>',
buttons: [
    'copy', 'csv', 'excel'
],
columns: [
    {
        "title": "col1",
        "data": "col1"
    },
    {
        "title": "col2",
        "data": "col2"
    },
    {
        "title": "col3",
        "data": "col3"
    },
    {
        "title": "col4",
        "data": "col4"
    }
]

});


Solution

  • You can use columnDefs on your DataTable, like this:

    $('#totals-table').DataTable({
      columnDefs: [{
        "targets": 4,// index of the column where the result should display
        "render": function(data, type, column) {
          return column[4] * column[7]; //target the column you want to multiply by its index
        }
      }]
    })
    

    Fiddle here.