​

var table;

​

// Helper to be able to use multiple renderers

$.fn.dataTable.render.multi = function(renderArray) {

    return function(d, type, row, meta) {

        for(var r = 0; r < renderArray.length; r++) {

            d = renderArray[r](d, type, row, meta);

        }

        return d;

    };

};

​

​

// Helper to color negative amount

$.fn.dataTable.render.colorNegative = function ( data, type, row ) {

    if (data < 0) {

        return '<span style="color:' + 'red' + '">' + ata + '</span>';

    }

    return data;

};

​

function addRow(json) {

  var row = JSON.parse(json);

  table.row.add(row).draw();

}

​

$(document).ready( function () {

  table = $('#example').DataTable({

    "columns": [

      { "data": "name" },

      { "data": "price", render: $.fn.dataTable.render.multi(

        [

          $.fn.dataTable.render.number( ',', '.', 2),

          $.fn.dataTable.render.colorNegative()

        ])

      },      { "data": "quantity" },

      { "data": null, render: function (data, type, row) { // null is to get all data for computing values, see "Computing values" section at https://datatables.net/manual/data/renderers#Functions 

          return ((data.price * data.quantity));

      }},      

    ],

  });

  var json = '{"name":"Discount", "price": -15, "quantity": 2, "total": ""}';

  $('#addRow').on( 'click', function () {

    addRow(json);

  });

  // Automatically add a first row of data

  $('#addRow').click();

​

} );

​

​

​