javascript - 数据表-附加附加列引发一些异常错误

我正在尝试实现服务器端 DataTable。
一切顺利，直到最后一个rowCallback，我将按钮附加到Actions的其他列上(即编辑/删除)。

问题:



这是我的代码。

<link href="~/Content/datatables.min.css" rel="stylesheet" /> //<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>


<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<div class="container">
    <div class="row" style="margin-top:25px">
        <table class="table table-bordered table-responsive dataTables-list">
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Id)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                         <a href="/Home/EditRole?id=@item.Id" class="btn btn-secondary btn-sm" title="Edit"><i class="fa fa-pencil"></i> </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

JavaScript:

<script src="~/Scripts/datatables.min.js"></script> //<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        $('.dataTables-list').DataTable({

            /*Sorting*/
            "bSort": true,
            "aoColumnDefs": [{
                'bSortable': true
            }],
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "ajax": {
                "url": "/Home/LoadData",
                "type": "POST",
                "datatype": "json"
            },
            "aoColumns": [{
                "mDataProp": "Id"
            }, {
                "mDataProp": "Name"
                }, {
                    "mDataProp": "Actions"
                }],
            "rowCallback": function (row, data, index) {
                var newBtns = '<a href="/Home/EditRole?id=' + data.Id + '" class="btn btn-secondary btn-sm" title="Edit"><i class="fa fa-pencil"></i> </a>';
                // $(row).append(newBtns);
                $('td:eq(2)', row).html(newBtns);
            },
            language: {
                paginate: {
                    next: '»',
                    previous: '«'
                },
                emptyTable: "Der er ingen poster.",
                sInfo: "Viser _START_ til _END_ af poster."
            }
        });
    });
</script>

Controller :

[HttpPost]
public ActionResult LoadData()
{
    try
    {
        var draw = Request.Form.GetValues("draw").FirstOrDefault();
        var start = Request.Form.GetValues("start").FirstOrDefault();
        var length = Request.Form.GetValues("length").FirstOrDefault();
        //Find Order Column
        var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][data]").FirstOrDefault();
        var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();


        int pageSize = length != null ? Convert.ToInt32(length) : 0;
        int skip = start != null ? Convert.ToInt32(start) : 0;
        int recordsTotal = 0;

        var v = (from a in _db.AllRoles select a); //Table contains only two Columns - Id and Name

        //SORT
        if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
        {
            v = v.OrderBy(sortColumn + " " + sortColumnDir);
        }

        recordsTotal = v.Count();
        var data = v.Skip(skip).Take(pageSize).ToList();

        return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {

        throw;
    }
}

问题是由于列差异可能是由于，但我不知道如何在首次实现ServerSide Datatable时解决它。

提前致谢。

最佳答案

错误消息中的链接提供了有关问题所在的很好的信息。您已经为DataTable函数指定了三列，但是在注释Table contains only two Columns - Id and Name中写道。

"aoColumns": [{
    "mDataProp": "Id"
}, {
    "mDataProp": "Name"
}, {
    "mDataProp": "Actions"
}],

该文件的Resolution部分告诉需要执行的操作:



因此，您需要将查询结果转换为另一个类，该类将具有Actions的其他属性。高温超导