Question

我正在尝试实施服务器端 <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">#</th><th scope="col">#</th> <th scope="col" style="width: 500px;">Heading heading'</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> <th scope="col">Heading</th><th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th><th scope="row">1</th> <td style="width: 300px;">jksdfn jhs fjidsh fj id hidsfdsfd</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> </tr> <tr> <th scope="row">1</th><th scope="row">1</th> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> <td>Cell</td><td>Cell</td> </tr> </tbody> </table>。一切都完美无缺，直到最后DataTable，我在其中添加按钮以添加其他操作列（即编辑/删除）。

问题：

这是我的代码。

rowCallback

JavaScript的：

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

控制器：

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

提前致谢。

Answer 1

我修改了我的代码中的以下部分以解决错误。

"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>'
 }],

我为该列添加了 defaultContent ，因为它没有从Database / Sp获取值。

P.S。 @dee提供的答案也是正确的，可以解决错误。两者都是这个问题的解决方案。

Answer 2

错误消息中的链接提供了有关问题的非常好的信息。您已为DataTable函数指定了三列，但在评论Table contains only two Columns - Id and Name中写入时。

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

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

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

因此，您需要将查询结果转换为另一个具有Actions附加属性的类。 HTH

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

2 个答案: