How do I modify DataTables columns from CSV AJAX request?

Question

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"
    }
]

});

One question, can you view datatable with the data correctly but without the logic? — Dani, Jun 25 '18 at 16:41
Yes, as it stands, the DataTable is populated with the CSV file data. — plusvictoria, Jun 25 '18 at 18:43

score 0 · Accepted Answer · answered Jun 26 '18 at 00:04

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.

How do I modify DataTables columns from CSV AJAX request?

1 Answers1