DataTable - 附加附加列抛出一些异常错误

Posted 2023-05-07

【中文标题】DataTable - 附加附加列抛出一些异常错误

【英文标题】：DataTable - Appending Additional column is throwing some Exception Error

【发布时间】：2018-07-23 17:31:11

【问题描述】：

我正在尝试实现 服务器端 DataTable。 一切都很好，直到最后一个 rowCallback 我将按钮附加到操作的附加列（即编辑/删除）。

问题：

这是我的代码。

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

控制器：

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

提前致谢。

【问题讨论】：

datatables.net/tn/4 有帮助吗？

@mjwills this link 帮助了。 columns.defaultContent 解决了这个问题。谢谢你:)

我建议给你的链接中明确提到了这一点。

是的，但是由于我使用的语法有点不同，我最初无法理解这一点，并尝试了多种方式，其中 1 有所帮助。 @mjwills

【参考方案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 获取值。

附： @dee 提供的答案也是正确的，将解决错误。两者都是这个问题的解决方案。

【参考方案2】：

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

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

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

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

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

【讨论】：

是的，这也是一种方法，为列提供默认值也可以解决错误。我正在提供答案中的解决方案。谢谢你。 :)