如何从 jQuery 数据表中的 ajax 数据源获取 mRender() 函数中的隐藏列值

Question

我正在尝试从 asp.net mvc5 中的 ajax 源创建一个 jQuery 数据表。 我想为编辑和删除添加一个额外的列，它不在我的模型类或 ajax 数据源中。对于编辑和删除功能，我需要我的数据表中没有显示的 Id 列的值。

这是我的模型类：

public class Country
{
    public int Id { get; set; }
    [Required(ErrorMessage = "Country Code Name Must not be empty")]
    public String Code { get; set; }
    [Required(ErrorMessage = "Country Name Must not be empty")]
    public String Name { get; set; }
    [Required(ErrorMessage = "Template Name Must not be empty")]
    public String Template { get; set; }
    [Required(ErrorMessage = "SPViews Name Must not be empty")]
    public String SPViews { get; set; }
}

这是我的控制器：

    public ActionResult GetAll(JQueryDataTableParamModel param)
    {
        var countryList = _repository.GetAll().ToList();
        var filteredCountry = (from e in countryList
                               where (param.sSearch == null || e.Name.ToLower().Contains(param.sSearch.ToLower()))
                               select e).ToList();
        var result = from country in filteredCountry.Skip(param.iDisplayStart).Take(param.iDisplayLength)
                     select new[] { country.Id,country.Code, country.Name, country.Template, country.SPViews };

        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = countryList.Count(),
            iTotalDisplayRecords = filteredCountry.Count,
            aaData = result
        }, JsonRequestBehavior.AllowGet);
    }

这是我的 html 表格：

<table id="countryListTable" class="table table-condensed">
<thead>
    <tr>
        <th>Id</th>
        <th>Code</th>
        <th>Name</th>
        <th>Template</th>
        <th>SPViews</th>
        <th>&nbsp;</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

最后是我的 jQuery 代码：

     var countryTable = $("#countryListTable").dataTable({
            "bServerSide": true,
            "bProcessing": true,
            "sAjaxSource": "/Country/GetAll",
            "aoColumns": [
                null,
                null,
                null,
                null,
                {     // fifth column (Edit link)
                    "mData": "Id",
                    "bSearchable": false,
                    "bSortable": false,
                    "mRender": function (nRow, aData) {
                        //need to get the Id column value
                        return '<a class="glyphicon glyphicon-pencil" href="/Country/Edit/">Edit</a><a class="glyphicon glyphicon-remove" href="/Country/Delete/">Delete</a>';
                    }
                }
            ]
        });

任何帮助将不胜感激。 问候:)

Answer 1

首先，我会尝试使用aoColumnDefs 而不是aoColumns。
根据数据表文档：

http://datatables.net/usage/columns

aoColumnDefs：此数组允许您定位特定列， 多列或所有列，使用每个列的 aTargets 属性 数组中的对象（请注意 aoColumnDefs 是在 数据表 1.7)。这在创建表格时提供了极大的灵活性， 因为 aoColumnDefs 数组可以是任意长度，以列为目标 你特别想要。

接下来，我不太清楚你打算如何在编辑和删除链接中使用Id， 但这里Id 被附加到url：

  "aoColumnDefs": [
        { "mData": "Code ", "aTargets": [ 0 ] },
        { "mData": "Name", "aTargets": [ 1 ] },
        { "mData": "Template", "aTargets": [ 2 ] },
        { "mData": "SPViews", "aTargets": [ 3 ] },               
        { "mData": "Id", "aTargets": [ 4 ], 
            "mRender": function ( data, type, full ) {
                return '<a class="glyphicon glyphicon-pencil" href="/Country/Edit/' + data + '">Edit</a><a class="glyphicon glyphicon-remove" href="/Country/Delete/' + data + '">Delete</a>';
            }
        },
        { "bSortable": false, "aTargets": [ 4 ] }
    ],

...这里Id 显示为data- attribute，您可以使用例如jquery 访问其值：

  "aoColumnDefs": [
        { "mData": "Code ", "aTargets": [ 0 ] },
        { "mData": "Name", "aTargets": [ 1 ] },
        { "mData": "Template", "aTargets": [ 2 ] },
        { "mData": "SPViews", "aTargets": [ 3 ] },               
        { "mData": "Id", "aTargets": [ 4 ], 
            "mRender": function ( data, type, full ) {
                return '<a class="glyphicon glyphicon-pencil" data-countryid="' + data +'" href="/Country/Edit/">Edit</a><a class="glyphicon glyphicon-remove" data-countryid="' + data +'" href="/Country/Delete/">Delete</a>';
            }
        },
        { "bSortable": false, "aTargets": [ 4 ] }
    ],  

Answer 2

@mg1075 谢谢你的回复。 fnRender 函数似乎是deprecated。我没有尝试您的解决方案，但我使用 mRender 功能以另一种方式修复了它。 所以这是我的解决方案：

      countryTable = $("#countryListTable").dataTable({
            "bServerSide": true,
            "bProcessing": true,
            "sAjaxSource": "/Country/GetAll",
            "aoColumns": [
                 { "bVisible": false },
                  null,
                  null,
                  null,
                  null,
                  {
                      mData: 0,//The Id column
                      "bSearchable": false,
                      "bSortable": false,
                      mRender: function (data, type, row) {

                          return '<a class="glyphicon glyphicon-pencil" onclick="editCountry(\'/Country/Edit/' + data + '\');return false;">Edit</a><a class="glyphicon glyphicon-remove" onclick="deleteCountry(\'/Country/Delete/' + data + '\');return false;">Delete</a>';
                      }
                  }],

        });

我认为这两种方法都应该是完美的