Javascript DataTable-追加附加列会引发一些异常错误

我正在尝试实现服务器端

数据表

。 直到最后一个

rowCallback

为止，一切都进行得非常顺利，我将在附加列中添加按钮以执行操作（即编辑/删除）

问题：

<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>

[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;
    }
}

这是我的密码

<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>

这个问题是由于列差异造成的，但我不知道如何解决它，因为我第一次实现了

ServerSide Datatable

---

提前感谢。

错误消息中的链接提供了有关问题所在的非常好的信息。您为

DataTable

函数指定了三列，但在注释

中写入时，表仅包含两列-Id和Name

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

文档的这一部分说明了需要做什么：

如果使用列，请确保您已为该表准确指定了HTML中存在的列数

---

因此，您需要将查询结果转换为另一个类，该类将具有

操作的附加属性。HTH
我修改了代码中的以下部分以解决错误

"aoColumns": [{
       "mDataProp": "Id"
 }, {
       "mDataProp": "Name"
 }, {
       "mDataProp": "Actions",
       "defaultContent": '<a href="/Home/EditRole?id=0" class="btn btn-secondary btn-sm" title="Edit"><i class="fa fa-pencil"></i> </a>'
 }],

“aoColumns”：[{
“mDataProp”：“Id”
}, {
“mDataProp”：“名称”
}, {
“mDataProp”：“操作”，
“defaultContent”：”
}],

我为该列添加了defaultContent，因为它没有从数据库/Sp获取值

p.S.提供的答案也是正确的，将解决错误。两者都是这个问题的解决方案

有帮助吗？@mjwills帮了忙。columns.defaultContent解决了这个问题。谢谢：）我在给你的链接中明确提到了这一点。是的，但是由于我使用的语法有点不同，我一开始没能做到这一点，并且尝试了多种方法，我从中得到了帮助@mjwillsYes这也是一种方法，为列提供默认值也可以解决错误。我提供的答案。谢谢。：）