I'm using DataTables (datatables.net) to display data from an Ajax source and having trouble customizing it. One thing I would like to do is add a column so I can have for example an 'edit' button for each row.

The closest thing to that in the examples is here but I can't get that to work with an ajax source.

Currently, I'm using the following code to display my table:

fnServerObjectToArray = function ( aElements ){

    return function ( sSource, aoData, fnCallback ) {

        $.ajax( {

            dataType: 'json', 

            type: POST, 

            url: sSource, 

            data: aoData, 

            success: function (json) {

                var a = [];

                for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {

                    var inner = [];

                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {



                        inner.push( json.aaData[i][aElements[j]] );

                    }

                    a.push( inner );

                }

                json.aaData = a;

                fnCallback(json);

            }

        } );

    }

}



$(document).ready(function() {

    $('#example').dataTable( {

        bProcessing: true,

        sAjaxSource: 'get_data.php',

        fnServerData: fnServerObjectToArray( [ 'username', 'email' ] )

    } );

});