server side processing fails on datatable plugin in jquery

Question

Hi,

I am using the jquery 'datatables' plugin from http://datatables.net/ (I haveposted this on their forum but am posting here as I am not sure how fast it will get answered there). However I am having troubles getting the data to load into the table. I am trying a very simple example but it keeps coming back saying "Microsoft JScript error: 'undefined' is null or not an object" from the jquery.datatable.min.js file. It happens on line 440 which is

{var aColumns=sColumns.split(",")

My controller is

 public JsonResult Json()
        {
            JsonResult res = null;

            object[] aa = new object[1];
            Reps reps = new Reps();
            reps.Name = "John";
            reps.Job = "Plumber";
            aa[0] = reps;
            var o = new
                        {
                            sEcho = 1,
                            iTotalRecords = 1,
                            iTotalDisplayRecords = 1,
                            aaData = aa
                        };

            res = Json(o);
            return res;

        }

my jquery file is

var oTable;

$(document).ready(function() {

    //event handlers
    $("#uxAddReferral").click(OnAddReferralClick);
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
    //setup the grid
    oTable = $('#uxReferralTable').dataTable(
        {     
            "bProcessing": true,
            "bServerSide": true,         
            "sAjaxSource": "/Referral/Json"
        }
    );
});

html file is (actually .spark)

<div id="demo"></div>
<div id="uxReferralTable">
</div>

any ideas??

Answer 1

The variable dataTables uses for column definitions is aoColumns, not aColumns.

Answer 2

Your div#uxReferralTable remains empty. You place a table into div#demo.