0

我可以使用 DataTables.net 静态绑定，如下所示：

        <script type="text/javascript">

        $(document).ready(function () {
            $('#testDatatable').dataTable({

            "aaData": [
                ["Ibrahim", 55],
                ["Asif", 20],
                ["Shariful", 70],
                ["John", 55],
                ["Doe", 40],
                ["Nazmul", 30],
                ["Jane", 15],
                ["Ershad", 10],
                ["Yusuf", 44],
                ["Bill", 22],
                ["Steve", 18]
            ]
                ,
            "aoColumns": [
                { "sTitle": "Name" },
                { "sTitle": "Age" }
                ]

            });

        });

    </script>

但是对于 prop aaData，我想从 Web 服务中获取数据。如下所示：

        <script type="text/javascript">

        $(document).ready(function () {
            $('#testDatatable').dataTable({

                "aaData": $.getJSON('http://localhost:9183/Service.svc/GetCustomer')
                ,
            "aoColumns": [
                { "sTitle": "Name" },
                { "sTitle": "Age" }
                ]

            });
        });

    </script>

我的服务如下所示：

    [OperationContract]
    [WebGet(ResponseFormat = WebMessageFormat.Json)]
    public List<Customer> GetCustomer()
    {
        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { Name = "Ibrahim", Age = 10 });
        customers.Add(new Customer { Name = "John Doe", Age = 20});
        return customers;
    }

这不起作用。它表明没有找到任何记录。有人请告诉我我有哪些选择或哪里出错了。任何建议都受到高度赞赏。

4

3 回答 3

3

您的网络服务正在返回一个对象数组，默认情况下 datatables 需要一个数组数组。您有两个选择，要么更新您的 Web 服务，要么更改您的数据表配置以使用该mData属性按名称引用属性：

aoColumns": [
    { "sTitle": "Name", "mData": "Name" },
    { "sTitle": "Age", "mData": "Age" }
]

mData您可以在数据表参考页面找到更多信息。只需搜索mdata.

于 2013-04-23T14:18:22.197 回答
1

因此，我终于可以将 Datatable 与我的 Web 服务调用绑定。这是一种迂回的方法，但至少解决了我的主要目标。我从我的服务中获取数据，运行一个循环，将 JSON 格式化为 Datatable 接受的格式 JS 数组，并将“aaData”设置为格式化的 JS 数组：

$(document).ready(function () {

            var returnData;
            $.ajax({
                url: "http://localhost:9183/Service.svc/GetCustomer",
                async: false,
                dataType: 'json',
                success: function (data) {
                    returnData = data;
                }
            });

            var arrayReturn = [], results = returnData;
            for (var i = 0, len = results.length; i < len; i++) {
                var result = results[i];
                arrayReturn.push([ result.Age, result.Name]);
            }

            $('#testDatatable').dataTable({

                "aaData": arrayReturn,
                "aoColumns": [
                { "sTitle": "Name" },
                { "sTitle": "Age" }
                ]

            });

        });

我不必更改服务中的任何内容。 但是我仍然不知道为什么我上面的第一次尝试行不通，我还有什么更好的选择。因此，请随意推测这一点。感谢那些至少试图提供帮助的人。

于 2013-04-22T10:44:12.430 回答
0

我认为您可以将服务器端的列表转换为 JSON 并返回。有关简单示例，请参见this和this。

当然，SO 上还有其他可用的示例。

于 2013-04-21T10:22:35.247 回答