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

あなたのウェブサービスはオブジェクトの配列を返しています。デフォルトでは、データテーブルは配列の配列を期待しています。Web サービスを更新するか、プロパティを使用しmDataて名前でプロパティを参照するようにデータテーブル構成を変更するかの 2 つのオプションがあります。

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

詳細についてmDataは、datatablesリファレンス ページを参照してください。を検索するだけです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 に答える