Load ASP.Net MVC JSONResult jQuery DataTables

Question

I\'m trying to get the DataTables(http://datatables.net) to work with a JsonResult returned by an ASP.Net MVC Controller. I keep getting a \"DataTables warning (table id = \

Answer 1

The following works great for me:

$(function () {
    $('#example').dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Home")'
    });
});

I have removed the sAjaxDataProp property.

with this data source:

public ActionResult LoadPhoneNumbers()
{
    return Json(new
    {
        aaData = new[] 
        {
            new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
            new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
            new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
        }
    }, JsonRequestBehavior.AllowGet);
}

and for your example with phones simply:

public ActionResult LoadPhoneNumbers()
{
    var phoneNumbers = new List<PhoneNumber>(new[] 
    {
        new PhoneNumber { Number = "555 123 4567", Description = "George" },
        new PhoneNumber { Number = "555 765 4321", Description = "Kevin" },
        new PhoneNumber { Number = "555 555 4781", Description = "Sam" }
    });

    return Json(new
    {
        aaData = phoneNumbers.Select(x => new[] { x.Number, x.Description })
    }, JsonRequestBehavior.AllowGet);
}

Answer 2

In this example it appears that the data returned from the controller method needs to be in a specific format. He's actually returning the list as part of aaData. It also explains what each parameter is for. Perhaps you're just not formatting the return in a json format that DataTables understands.

public class HomeController : Controller
{
    public ActionResult AjaxHandler(jQueryDataTableParamModel param)
    {
        return Json(new{
                sEcho = param.sEcho,
                iTotalRecords = 97,
                iTotalDisplayRecords = 3,
                aaData = new List<string[]>() {
                    new string[] {"1", "a1", "a2", "a3"},
                    new string[] {"2", "b1", "b2", "b3"},
                    new string[] {"3", "c1", "c2", "c3"}
                    }
            },
        JsonRequestBehavior.AllowGet);
    }
}