Question

Does anyone know of any samples that use the DataTables jquery plugin with a WCF service?

I’m attempting to use a WCF service with the JavaScriptSerializer which unfortunately seems to return dodgy JSON by adding extra backslashes. However the DataTables would seem to provide a way to work around that given that the retrieval of the JSON can be handed off to a jQuery call. I’m not familiar enough with jQuery to get it working though.

My javascript is:

    $(document).ready(function () {
        $('#example').dataTable({
            "bJQueryUI": true,
            "bSort": true,
            "bProcessing" : true,
            "bServerSide" : true,
            "bAutoWidth": true,
            "sAjaxSource": "http://10.1.1.7/mvc-jqdatatable/datatabletestservice.svc/gettable",
            "fnServerData": function(sSource, aoData, fnCallback) {
                $.getJSON( sSource, aoData, function (json) { 
                        fnCallback(json)
                } )
            },
        });
    });

My WCF service is spitting out:

HTTP/1.1 200 OK
Content-Length: 56
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-Powered-By: ASP.NET
Date: Thu, 23 Sep 2010 12:37:24 GMT

"{\"aaData\":[[\"a\",\"b\",\"c\"],[\"d\",\"e\",\"f\"]]}"

The JSON string is getting to the DatatTables script but it’s not being recognised as JSON and is getting an error of:

‘aaData.length’ is null or not an object

Answer 1

Murphy’s Law, as soon as I posted the question I found a sample which got me up and running.

The trick ended up being to use the jQuery parse the string returned by the WCF service. Without doing that the DataTables script can’t understand the JSON format WCF uses since it’s either non-standard or is pushing the boundaries.

    $(document).ready(function () {
        $('#example').dataTable({
            "bJQueryUI": true,
            "bSort": true,
            "bProcessing" : true,
            "bServerSide" : true,
            "bAutoWidth": true,
            "sAjaxSource": "http://10.1.1.7/mvc-jqdatatable/datatabletestservice.svc/gettable",
            "fnServerData": function(sSource, aoData, fnCallback) {
                $.ajax({
                  "datatType" : 'json',
                  "contentType" : 'application/json',
                  "url" : sSource,
                  "data" : aoData,
                  "success" : function(msg) {
                    var json = $.parseJSON(msg);
                    fnCallback(json);
                  }
                })
            },
        });
    });

Which works with a WCF service of:

public interface IDataTableTestService
{
    [OperationContract]
    [WebInvoke(ResponseFormat=WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.WrappedRequest, Method="GET")]
    string GetTable(int iDisplayStart,
        int iDisplayLength,
        string sSearch,
        bool bEscapeRegex,
        int iColumns,
        int iSortingCols,
        int iSortCol_0,
        string sSortDir_0,
        int sEcho,
        int webSiteId,
        int categoryId);
}

public class DataTableTestService : IDataTableTestService
{
    public string GetTable(int iDisplayStart,
         int iDisplayLength,
         string sSearch,
         bool bEscapeRegex,
         int iColumns,
         int iSortingCols,
         int iSortCol_0,
         string sSortDir_0,
         int sEcho,
         int webSiteId,
         int categoryId)
    {

        var result = new List<string[]>() { new string[]{"a", "b", "c"}, new string[]{"d", "e", "f"}};

        JavaScriptSerializer serialiser = new JavaScriptSerializer();
        return serialiser.Serialize(new {  sEcho,
                                            iTotalRecords = 2,
                                            iTotalDisplayRecords = 2,
                                            aaData = result
                                        });
    }
}