jquery - 将数据表 jquery 插件与 WCF 服务结合使用的示例

Question

有谁知道有任何使用 DataTables 的样本吗？带有 WCF 服务的 jquery 插件？

我正在尝试将 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' is null or not an object

Answer 1

墨菲定律，我一发布问题就发现了sample这让我开始运行。

最终的技巧是使用 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
                                        });
    }
}