Unable to update rows that are created dynamically using the row.add() api

09wattry

I have the following empty table that I am using to capture transactions. However, when I update the table data and draw nothing happens. I am only trying to only partially update the records as these values are updated by an input.

When I updated the record the whole row appears to be reset and the data in the array is not displayed. However, it is stored in the data object. Why is this happening?

The initial row is rendered when the table is initialized. My application requires that each row be empty on the row creation or contain an HTML input and on change of said input the other values must be found and calculated.

  var table = $('#budgetAllocation').DataTable({
    dom: '',
    initComplete: function() {
      addRow();
    },
    fnCreatedRow: function(nRow, aData, iDataIndex) {
      nRow.id = iDataIndex;
    },
    columns: [
      {
        name: 'fromChargeCodeId',
        orderable: false,
        defaultContent: createElement('input', {
          type: 'text',
          placeholder: 'Select an option',
          list: 'chargeCode'
        }).outerHTML
      },
      {
        name: 'fromChargeCodeName',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'fromBalance',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'amount',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'fromNewBalance',
        defaultContent: '',
        orderable: false,
      },
      {
        name: 'toChargeCodeId',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'toChargeCodeName',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'toBalance',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'toNewBalance',
        orderable: false,
        defaultContent: ''
      },
      {
        name: 'action',
        orderable: false,
        defaultContent: ''
      }
    ]
  });

  function addRow() {
    $('#budgetAllocation')
      .DataTable()
      .row.add({
        fromChargeCodeId: '',
        fromChargeCodeName: '',
        fromBalance: '',
        amount: '',
        fromNewBalance: '',
        toChargeCodeId: '',
        toChargeCodeName: '',
        toBalance: '',
        toNewBalance: ''
      })
      .draw();
  }

    var row = table.row(0);
    var rowData = row.data();

    rowData.fromChargeCodeId = 'This is my new value';
    rowData.fromChargeCodeName = 'Why is this not showing?';
    rowData.fromBalance = 'I don't understand why this won't work.';
    row.data(rowData).draw();

kthorngren

The problem appears to be that you aren't using columns.data. Took your example and built a test case:
http://live.datatables.net/xobositu/2/edit

Being lazy I just changed columns.name to columns.data. You can have both. The lack of columns.data is probably why you added columns.defaultContent.

Kevin

09wattry

I know you're not meant to thank people but, thank you. I thought the name was being used to reference the data.