Question

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

这是我的Model类：

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是在...中引入的 DataTables 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>';
                      }
                  }],

        });

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

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

2 个答案: