Datatables add new row to the beginning of the table

rathinaganesh

Hi,

I have a datatable created with inline editing. I want to override the new button functionality by overriding the fnClick functionality. I am able to achieve it to certain degree but I have 3 issues.

1. I have the datatable defined and trying to access it through the variable defined, but I am not able to see the reference to the table. For example. I reference the table as oTable and if I do oTable.fnAddData, I am getting an error. Instead if I do $('#SystemInfoRepeater').dataTable().fnAddData Its fine.

2. I am getting the following error when I invoke the fnAddData function.

DataTables warning: table id=SystemInfoRepeater - Requested unknown parameter 'Site' for row 1. For more information about this error, please see http://datatables.net/tn/4

1. I am issuing redraw method but still I see the table header and row not aligned properly. In other words, all the new textfields are of the same length and not aligning to the table header.

var InitiateEditableDataTable = function () {
return {
init: function (divId, doc, columns, fields, items, setUrl) {

        var editor = null;
        var buttons = [];
        var isEditing = null;

        editor = new $.fn.dataTable.Editor( {
            ajax: setUrl,
            table: divId,
            fields: fields
        });

        var oTable = $(divId).DataTable({
            stateSave: true,
            columns: columns,
            // responsive: true,
            scrollX: true,                
            data:items,             
            tableTools: {
                sRowSelect: "os",
                sRowSelector: 'td',
                aButtons: [{ sExtends: "editor_create", editor: editor, sButtonClass: 'btn-success datatables_toolbar_margin btn-sm', sToolTip : 'New', sButtonText : '<i class="fa fa-plus"></i>&nbsp;&nbsp;New',

                        fnClick: fnClickAddRow

                    },
                    { sExtends: "editor_edit",   editor: editor, sButtonClass: 'btn-primary datatable-button datatables_toolbar_margin btn-sm', sToolTip : 'Edit', sButtonText : '<i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;Edit'},
                    { sExtends: "editor_remove", editor: editor, sButtonClass: 'btn-danger btn-sm', sToolTip : 'Delete', sButtonText : '<i class="fa fa-trash-o"></i>&nbsp;&nbsp;Delete'}
                ]
            },              
            "dom": "<'repeater-footer' <'col-xs-3 col-sm-3'f><'col-xs-2 col-sm-2'C><'col-xs-4 col-sm-4'T>r>t<'repeater-header'<'col-sm-6'i><'col-sm-6'p>>",
            colVis: {
                buttonText: "<span class='glyphicon glyphicon-th'></span>",
                "bRestore": true,
                "activate": "click"
            }
        });    

        function fnClickAddRow() {
            var aiNew = $('#SystemInfoRepeater').dataTable().fnAddData(['', '', '', '','', '', '', '','', '']);
            var nRow = $('#SystemInfoRepeater').dataTable().fnGetNodes(aiNew[0]);
            editAddedRow($('#SystemInfoRepeater').dataTable(), nRow);
            isEditing = nRow;
        }                                             

        editor.on( 'open', function ( e, type ) {
                if ( type === 'inline' ) {
                    // Listen for a tab key event when inline editing
                    doc.on( 'keydown.editor', function ( e ) {
                        if ( e.keyCode === 9 ) {
                            e.preventDefault();

                            // Find the cell that is currently being edited
                            var cell = $('div.DTE').parent();

                            if ( e.shiftKey ) {
                                // Up to the previous row
                                cell.parent().prev().children().last(0).click();
                            }
                            else if ( cell.next().length ) {
                                // One cell to the right
                                cell.next().click();
                            }
                            else {
                                // Down to the next row
                                cell.parent().next().children().eq(0).click();
                            }
                        }
                    } );
                }
            } )
            .on( 'close', function () {
                doc.off( 'keydown.editor' );
        } );

        // Activate an inline edit on click of a table cell
        // or a DataTables Responsive data cell
        $(divId).on( 'click', 'tbody td', function (e) {
            editor.inline(this);
        } ); 


        function editAddedRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
            jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
            jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
            jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
            jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
            jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
            jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
            jqTds[7].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[7] + '">';
            jqTds[8].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[8] + '">';
            jqTds[9].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[9] + '">';                                
        } 

        function saveRow(oTable, nRow) {
            var jqInputs = $('input', nRow);
            oTable.fnUpdate(jqInputs[0].value, nRow, 0, true);
            oTable.fnUpdate(jqInputs[1].value, nRow, 1, true);
            oTable.fnUpdate(jqInputs[2].value, nRow, 2, true);
            oTable.fnUpdate(jqInputs[3].value, nRow, 3, true);
            oTable.fnUpdate(jqInputs[4].value, nRow, 4, true);
            oTable.fnUpdate(jqInputs[5].value, nRow, 5, true);
            oTable.fnUpdate(jqInputs[6].value, nRow, 6, true);
            oTable.fnUpdate(jqInputs[7].value, nRow, 7, true);
            oTable.fnUpdate(jqInputs[8].value, nRow, 8, true);
            oTable.fnUpdate(jqInputs[9].value, nRow, 9, true);
            oTable.fnDraw();
        }                              



    }

};

}();

Thanks.