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

Question

我正在努力从我的控制器获取序列化的 JSON 数据以显示在数据表中。我以前能够在将数据作为二维数组发送时显示数据。现在我希望能够使用我的对象并将其与列匹配（如第二个 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');
        }