How to use row.add with dynamic columns.

Keith_H

Version : 1.10.9

I have a table which I want to be able to dynamically refresh the contents of when other options change on the page. I can get this to work if I have a pre-determined number of columns. e.g.

        var dTable = $('#tbl1').DataTable();

        for (var i = 0; i < pData.length; i++) {
            dTable.row.add([
                 trim(pData[i].WSPPYY)
                ,trim(pData[i].BATCH)
                ,fncFormatNumber(pData[i].ENTRY,0,"N")
                ,trim(pData[i].DOCUMENT)
                ,trim(pData[i].ACCOUNT)
                ,trim(pData[i].NAME)
                ,trim(pData[i].SUP_REF)
                ,fncFormatDate(pData[i].DOC_DATE,2)
                ,fncFormatNumber(pData[i].GOODS_VAL,2,"N")
                ,fncFormatNumber(pData[i].TAX_AMT,2,"N")
            ]);
        }
        $('#tbl1').DataTable().draw();

However, if I have a dynamic number of columns (as the columns in my data is 6 months, so it varies depending on what the months are). The column headings are created on the server side when the page gets created, and I just add the data on the client side.
Note: the column headings will not change, as they are fixed based on the current date (i.e. current month + 5 future).

I have tried to destroy the table, restore the empty table (HTML) then create the table again once the new data has been added, but as I have fixed columns for the first 2 columns, when the table gets created the second time, the 'table' holding the 'fixed data' is slightly offset from the scrolling columns, so I feel that I could do with maybe not re-creating the table, only removing the content.

            $('#tbl1').dataTable({
                  "autoWidth":false
                , "fixedColumns": {leftColumns: 2 }
                , "info":false
                , "JQueryUI":true
                , "ordering":true
                , "paging":false
                , "scrollY":"300px"
                , "scrollX":"1485px"
                , "scrollCollapse":true
            });

So, can I use a row.add with a varying number of columns?
Thanks.