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

Posted 2023-05-09

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

【英文标题】：How to get an hidden column value in mRender() function from ajax data source in jQuery datatable

【发布时间】：2014-02-22 06:24:18

【问题描述】：

我正在尝试从 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>';
                    
                
            ]
        );

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

【参考方案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 ] 
    ],  

【参考方案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>';
                      
                  ],

        );

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