$(document).ready( function () {

  var addedRows = [];

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

    stateSave: true,

    'stateSaveParams': function (settings, data) {

      data.added = addedRows;

      },

    'stateLoadParams': function (settings, data) {

      addedRows = data.added;

      if (addedRows === undefined) {

        addedRows = [];

        }

      },

    'initComplete': function () {

      if (typeof addedRows !== 'undefined') {

        if ( addedRows !== [] ) {

          this.api().rows.add(addedRows).draw();

        }

      }      

      this.api().state.save();

      },

    columns: [{data: null,

               render: function (data, type, row ) {

                 return '<button id="deleteRow">Delete</button>';

               }

              },

              { data: 'productname' },

              { data: 'productid' },

              { data: 'qty', "defaultContent": '<input type="number" value="0" min="0" max="100" step="1"/>', attr: {type: "number"}},

              { data: 'producttot'},

    ],

  } );

// Add Items to table

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

  data = ({ "productid": Math.round(Math.random() * 100),

            "productname": "SomeProduct" + Math.round(Math.random() * 100),

           "producttot": "",

           });

  addedRows.push(data);

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

  table.state.save();

});

​

// Update 'Total' column when value is changed in 'Quantity' column.

$("#example tbody tr").on('keyup input' , function(event){

              product_price = table.cell(this, 2).data();

              product_qty = $(table.cell(this, 3).node()).find('input').val();

              subtotal = product_price * product_qty;

              table.cell(this, 4).data( subtotal ).draw();              

});

​

// Delete individual rows              

$('#example tbody').on('click', '#deleteRow', function (){

      //table.state.save();

      table.row($(this).parents('tr')).remove().draw();

      table.state.save();

​

});              

​

// Delete all items from table

$('#emptyTable').click(function () {

  table.clear().draw();

  table.state.clear();

});              

} );

​