2

有谁知道将DataTables jquery 插件与 WCF 服务一起使用的任何示例？

我正在尝试将 WCF 服务与 JavaScriptSerializer 一起使用，不幸的是，它似乎通过添加额外的反斜杠返回了狡猾的 JSON。然而，鉴于 JSON 的检索可以移交给 jQuery 调用，DataTables 似乎提供了一种解决方法。我对 jQuery 不够熟悉，无法让它工作。

我的 javascript 是：

    $(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)
                } )
            },
        });
    });

我的 WCF 服务吐出：

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\"]]}"

JSON 字符串正在进入 DatatTables 脚本，但它未被识别为 JSON，并且出现以下错误：

'aaData.length' 为 null 或不是对象

4

1 回答 1

1

墨菲定律，一旦我发布了问题，我就找到了一个让我启动并运行的样本。

诀窍最终是使用 jQuery 解析 WCF 服务返回的字符串。如果不这样做，DataTables 脚本将无法理解 WCF 使用的 JSON 格式，因为它要么是非标准的，要么是在突破界限。

    $(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);
                  }
                })
            },
        });
    });

与以下 WCF 服务一起使用：

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
                                        });
    }
}
于 2010-09-23T13:41:14.303 回答