Datatables inline editing with serverside processing

Question

I am trying to use inline editing on datatables using this example: DataTables - full row editing example. I am also using serverside processing. I cant seem to get the two working correctly. The edit and delete links do not appear in the table. Does anybody know where i am going wrong?

Here is my js:

function restoreRow ( $acTable, nRow )
{
    var aData = $acTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);

    for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) {
        $acTable.fnUpdate( aData[i], nRow, i, false );
    }

    $acTable.fnDraw();
}

function editRow ( $acTable, nRow )
{
    var aData = $acTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
    jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">';
    jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">';
    jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">';
    jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">';    
    jqTds[5].innerHTML = '<input type="text" value="'+aData[5]+'">';    
    jqTds[6].innerHTML = '<input type="text" value="'+aData[6]+'">';    
    jqTds[7].innerHTML = '<input type="text" value="'+aData[7]+'">';    
    jqTds[8].innerHTML = '<a class="edit" href="">Save</a>';
}

function saveRow ( $acTable, nRow )
{
    var jqInputs = $('input', nRow);
    $acTable.fnUpdate( jqInputs[0].value, nRow, 0, false );
    $acTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
    $acTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
    $acTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
    $acTable.fnUpdate( jqInputs[4].value, nRow, 4, false ); 
    $acTable.fnUpdate( jqInputs[5].value, nRow, 5, false ); 
    $acTable.fnUpdate( jqInputs[6].value, nRow, 6, false ); 
    $acTable.fnUpdate( jqInputs[7].value, nRow, 7, false ); 
    $acTable.fnUpdate( '<a class="edit" href="">Edit</a>', nRow, 8, false );
    $acTable.fnDraw();
}


$(document).ready(function() {
        var $acTable= $("#academic_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "$acTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/serverside/academic_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(4)', nRow).html(''+ aData[6] +'&nbsp;'+ aData[7] +'');        
        }
        });

    var nEditing = null;

    $('#new').click( function (e) {
        e.preventDefault();

        var aiNew = $acTable.fnAddData( [ '', '', '', '', '', 
            '<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>' ] );
        var nRow = $acTable.fnGetNodes( aiNew[0] );
        editRow( $acTable, nRow );
        nEditing = nRow;
    } );

    $('#academic_table a.delete').live('click', function (e) {
        e.preventDefault();

        var nRow = $(this).parents('tr')[0];
        $acTable.fnDeleteRow( nRow );
    } );

    $('#academic_table a.edit').live('click', function (e) {
        e.preventDefault();

        /* Get the row as a parent of the link that was clicked on */
        var nRow = $(this).parents('tr')[0];

        if ( nEditing !== null && nEditing != nRow ) {
            /* Currently editing - but not this row - restore the old before continuing to edit mode */
            restoreRow( $acTable, nEditing );
            editRow( $acTable, nRow );
            nEditing = nRow;
        }
        else if ( nEditing == nRow && this.innerHTML == "Save" ) {
            /* Editing this row and want to save it */
            saveRow( $acTable, nEditing );
            nEditing = null;
        }
        else {
            /* No edit in progress - let's start one */
            editRow( $acTable, nRow );
            nEditing = nRow;
        }
    } );

});

Here is the table:

Add new row

<table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr>
<th>ID</th> 
<th>Year</th> 
<th>Employee</th>  
<th>Division</th>
<th>Line Manager</th>
<th>Contract</th>
<th>Entitlement</th>
<th>Units</th>
<th>Edit</th>
<th>Delete</th>
</tr> 
</thead>
<tbody>
    <tr>
        <td colspan="4" class="dataTables_empty">Loading data from server</td>
    </tr>
</tbody>

<tfoot>
<tr>
<th>ID</th> 
<th>Year</th> 
<th>Employee</th>  
<th>Division</th>
<th>Line Manager</th>
<th>Contract</th>
<th>Entitlement</th>
<th>Units</th>
<th>Edit</th>
<th>Delete</th>
</tr> 
</tfoot>
</table>

Answer 1

You will get help from the link for server-side processing. if you dbl click on cell, it auto convert into editable mode.

Answer 2

Using this example in aoColumns, he uses mDataProp for each column, but uses null for the extra column that doesn't match one of the data columns. he uses sDefaultContent to add his image, and JQuery to bind event handling to the cells in that column.

http://www.datatables.net/blog/Drill-down_rows

So in my case i added

{"mDataProp": null, "sDefaultContent": '<a class="edit" href="">Edit</a>'},
{"mDataProp": null, "sDefaultContent": '<a class="delete" href="">Delete</a>'},