How to get an hidden column value in mRender() function from ajax data source in jQuery datatable

Question

I am trying to create a jQuery datatable from a ajax source in asp.net mvc5. I want to add an extra column for edit and delete which is not in my model class or in ajax data-source.For the edit and delete functionality I need the value of the Id column which I have not shown in my datatable.

Here is my Model class:

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

Here is my Controller:

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

here is my html table:

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

and lastly here is my jQuery code:

     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>';
                    }
                }
            ]
        });

Any help would be appreciated. Regards :)

Answer 1

First, I would try using aoColumnDefs rather than aoColumns.
As per the datatables documentation:

http://datatables.net/usage/columns

aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want.

Next, I cannot quite tell how you intend to use the Id in the Edit and Delete links, but here the Id is appended to the 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 ] }
    ],

...and here the Id appears as a data- attribute whose value you could access, for instance, with 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 thank you for your reply. fnRender function seems to be deprecated. I did not try your solution, but I fixed it another way using mRender function. So here is my solution:

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

        });

I think the both approach should be perfect