Question

我正在努力从我的控制器获取序列化的JSON数据以显示在Datatable中。我之前能够在将其作为2D阵列发送时显示数据。现在我希望能够使用我的对象并将其与列匹配（如第二个JavaScript中所示）。我试图关注this solution，但在查看Datatables文档后我无法看到出现了什么问题。

更新请参阅下面我目前的情况。我试图通过命名参数来获取数据，因为我希望父行包含子项列表。如this DataTables link中所示，这些项目在选择时可见。虽然我仍然无法通过JSON数据使表格使用命名参数。

数据：

        for (int i = 0; i < 26; i++)
        {
            list.Add(new MembershipTransactionHistoryModel
            {
                TransactionDate = "01 May 2014",
                StoreName = "Store Name",
                CardNumber = "23423566",
                TransactionType = "Purchase",
                TransactionValue = "$134.25",
                PointsEarned = "100",
                PointsUsed = "23",
                PointsBalance = "40000"
            });
        }

        //return new JavaScriptSerializer().Serialize(list);
        return from l in list
                         select new[] {
                            l.TransactionDate,
                            l.StoreName, 
                            l.CardNumber,
                            l.TransactionType,
                            l.TransactionValue,
                            l.PointsEarned,
                            l.PointsUsed,
                            l.PointsBalance 
                         };

JavaScript的：

var grid = $('#transactionHistoryTable').dataTable({
    "bProcessing": true,
    "sAjaxSource": 'MembershipTransactionHistoryData',
    "fnServerParams": function (aoData) {
        aoData.push({ "name": "membershipId", "value": 7 })
    },
    "aoColumnDefs": [
        {
            "sTitle": "",
            "class": 'details-control',
            "orderable": false,
            "mData": null,
            "aTargets": [0],
            "defaultContent": ''
        },
        { "sTitle": "Transaction Date", "mData" : "TransactionDate", "aTargets": [1]},
        { "sTitle": "Store Name", "mData": "StoreName", "aTargets": [2] },
        { "sTitle": "Card Number", "mData": "CardNumber", "aTargets": [3] },
        { "sTitle": "Type", "mData": "Type", "aTargets": [4] },
        { "sTitle": "Value", "mData": "Value", "aTargets": [5] },
        { "sTitle": "Points Earned", "mData": "PointsEarned", "aTargets": [6] },
        { "sTitle": "Points Used", "mData": "PointsUsed", "aTargets": [7] },
        { "sTitle": "Points Balance", "mData": "PointsBalance", "aTargets": [8] }
    ],
    "paginate": true,
    "scrollY": maxHeight,
    "scrollCollapse": false,
    "sort": true
});

HTML：

    <table id="transactionHistoryTable" class="display" cellspacing="0">
        <thead>
            <tr>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>

结果错误：

DataTables warning: table id=transactionHistoryTable - Requested unknown parameter 'TransactionDate' for row 0. For more information about this error, please see http://datatables.net/tn/4

Answer 1

您必须将其作为String Array []返回，而不仅仅是List。

结果应该在数组中，必须：new string[]。

注意：在For loop添加以下代码之后：

var results = from l in list
                 select new[] { 
                            l.TransactionDate,
                            l.StoreName , 
                            l.CardNumber,
                            l.TransactionType,
                            l.TransactionValue,
                            l.PointsEarned,
                            l.PointsUsed,
                            l.PointsBalance 
                     };

return Json(results, JsonRequestBehavior.AllowGet); // Return the Result as a string array.

无需按语法序列化。它将自动序列化。

Data Table expects your results should be in a array。当你将它作为list of class objects传递时。

看看这个DataTables - Server side processing Article。

Answer 2

我最终设法做到这一点的方法是完全避免使用JavaScript，并通过我的视图模型相应地构建我的HTML。

例如

            <tbody>
                @foreach(var item in Model.GetData())
                {
                    <tr>
                        <td class="details-control"></td>
                        <td>@item.TransactionId</td>
                        <td>@item.TransactionDate</td>
                        <td>@item.StoreName</td>
                        <td>@item.CardNumber</td>
                        <td>@item.TransactionType</td>
                        <td>@item.TransactionValue</td>
                        <td>@item.PointsEarned</td>
                        <td>@item.PointsUsed</td>
                        <td>@item.PointsBalance</td>
                    </tr>
                }
             </tbody>

然后我使用documentation from DataTables构建我的子项目表并执行了一个帖子来获取该数据。

我在ajax帖子中的成功方法如下：

        success: function (data) {
            var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';

            for (var i = 0; i < data.length; i++) {
                html += '<tr>' +
                            '<td>APN:</td>' +
                            '<td>' + data[i].ProductAPN + '</td>' +
                            '<td>Desc:</td>' +
                            '<td>' + data[i].ProductDescription + '</td>' +
                            '<td>Qty:</td>' +
                            '<td>' + data[i].Quantity + '</td>' +
                            '<td>Amount:</td>' +
                            '<td>' + data[i].Amount + '</td>' +
                            '<td>Points:</td>' +
                            '<td>' + data[i].PointsEarned + '</td>' +
                        '</tr>' 
            }

            html += '</table>';

            // Open this row
            row.child(html).show();
            tr.addClass('shown');
        }

从Controller到Datatables表获取序列化的JSON数据

2 个答案: