Adding a row in the middle of the table

msand01

I am essentially following this link to add a blank row to the middle of my Datatables table: http://datatables.net/forums/discussion/11899/unable-to-add-row-in-the-middle-of-a-data-table

The first row that is inserted seems to work beautifully, however when subsequent rows are added, odd things seem to happen, i.e. extra blank rows are added to the table. Is there something else I should be doing to retain the added rows properly?

Here is my method that inserts a new row:
$('#my-table tbody').on('click', 'i.glyphicon-plus-sign', function () {
var insertedRowIndex = oTable.row($(this).parents('tr')).index();
addRow();
var lastRowIndex = tableScriptSteps.page.info().recordsTotal-1;

            // re-number hidden sort column to reflect added row 
            $.each(oTable.rows().data(), function (i, row) {
                var firstCell = oTable.cell(i, 0); //first col is a hidden col containing the sort index)

                if (i < insertedRowIndex) {
                    firstCell.data(i).draw();
                }
                else if (i >= insertedRowIndex && i != lastRowIndex) {
                    firstCell.data(firstCell.data() + 1).draw();
                }
                else if (i == lastRowIndex) {
                    firstCell.data(insertedRowIndex).draw();
                }
            })           

});

function addRow() {

oTable.row.add({
    "SortIndex": oTable.page.info().recordsTotal,
    "ID": $("#autocomplete").val(),
    "ScNumber": "",
    "BlNumber": "",
    "Action": "",
    "Label": ""
}).draw();

}

msand01

Here is my datatables init:

oTable= $('#myTable').DataTable({
"data": jsObjArray,
"destroy": true,
"pageLength": 25,
"autoWidth": false,
"orderFixed": [ 0, 'asc' ],
"columns": [
{ "data": "SortIndex", /"visible": false/ },
{ "width": "15%", "data": "ID", "orderable": false, "className": "readonly" },
{ "width": "10%", "data": "ScNumber", "orderable": false },
{ "width": "10%", "data": "BlNumber", "orderable": false },
{ "width": "20%", "data": "Action", "orderable": false },
{ "width": "30%", "data": "Label", "orderable": false },
{ "width": "2%", "data": "Delete", "orderable": false, "render": simple_delete_icon, "className": "readonly"},
{ "width": "2%", "data": "Insert", "orderable": false, "render": simple_add_icon, "className": "readonly"}
],
});

raafa

did you find a solution to this???