Question

有没有人知道任何使用DataTables jquery插件和WCF服务的示例？

我正在尝试使用带有JavaScriptSerializer的WCF服务，遗憾的是，它似乎通过添加额外的反斜杠来返回狡猾的JSON。然而，DataTables似乎提供了一种解决方法，因为JSON的检索可以传递给jQuery调用。我对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或不是对象

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
                                        });
    }
}

将datatables jquery插件与WCF服务一起使用的示例

1 个答案: