Hidden details option of dataTables when loaded through model MVC

Question

I have a table of employees which I fetch using $.load ajax call by sending back a partialview as below:

Model Class

public class EmployeeDetails
{
    public string FirstName{get;set;}
    public string LastName{get;set;}
    public string AccountStatus{get; set;}
    public string LastLogin{get;set;}
    public string EmailAddress{get;set;}
    public string Contact {get;set;}
    public string Gender {get;set;}
}

PartialViewResult method in controller

public PartialViewResult GetEmployeeDetails()
{
    List<EmployeeDetails> model=new List<EmployeeDetails>();
    using(var context=new ContextConnection())
    {
        var employees=(from e in context.tbl_employees select e).ToList();
        foreach(var employee in employees) //Fill the model
        {
            model.add(new EmployeeDetails(){
                 FirstName=employee.fname,
                 LastName=employee.lname,
                 AccountStatus=employee.acc_status,
                 LastLogin=employee.last_login,
                 EmailAddress=employee.email,
                 Contact=employee.contact,
                 Gender=employee.gender
            });
        }
    }
    return PartialView("_EmployeeDetails",model) //passing model back
}

_EmployeeDetails View

@model IEnumerable<ProjectName.Models.EmployeeDetails>

<table id="employee" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Full Name</th>
                <th>Account Status</th>
                <th>Last Login</th>
                <th>Email Address</th>
            </tr>
        </thead>
        <tbody>
        @foreach(var emp in Model)
        {
            <tr>
                <td></td>
                <td>@emp.FirstName + " " + @emp.LastName</td>
                <td>@emp.AccountStatus</td>
                <td>@emp.LastLogin</td>
                <td>@emp.EmailAddress</td>
            </tr>
         }
         </tbody>
</table>

From this link I was able to achieve the UI whatever given in the link

var table; //global variable
$('.loadEmployee').on('click',function(){
   $("#loadBody").load("/Admin/GetEmployeeDetails",function(){
         table=$("#employee").dataTable({
               "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "Full Name" },
                { "data": "Account Status" },
                { "data": "Last Login" },
                { "data": "Email Address" }
                ],
                "order": [[1, 'asc']]
         });
   }
})

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d["Full Name"]+'</td>'+ //this is fine
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d["Contact Details"]+'</td>'+ //Need to get Contact here
        '</tr>'+
        '<tr>'+
            '<td>Gender:</td>'+
            '<td>d["Gender"]</td>'+ //Need to get Gender here
        '</tr>'+
    '</table>';
}

// Add event listener for opening and closing details
$('#employee tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
 });

My question here is:

I have model filled with all the data but how to display the extra data which is in the model (Contact),(Gender) in format function

The demo given in the above link uses .txt files to extract data but nowhere it is mentioned how to do this with model data according to my above scenario. The + link and - links are working fine except the model values for Contact and Gender are not getting displayed. One scenario I am thinking of is add all these as tds in foreach and hide them so that I can get the column values as I am getting now for displayed data. But then this would be heavy when there is huge amount of columns to be displayed. Any ideas/lights on this is much appreciated.

Answer 1

One option would be to add the 'extra' values as data-* attributes in the table row.

@foreach(var emp in Model)
{
  <tr data-contact="emp.contact" data-gender="emp.Gender">
    ....
  </tr>
}

and then extract them in the buttons click event and pass those values to the format() function

$('#employee tbody').on('click', 'td.details-control', function () {
  var tr = $(this).closest('tr');
  var contact = tr.data('contact');
  var gender = tr.data('gender');
  // you could also add the following as an option to using the row data
  var fullName = tr.children('td').eq(1).text();
  var row = table.row( tr );
  if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child(format(row.data(), contact, gender)).show();
    // or row.child(format(fullName, contact, gender)).show();
    tr.addClass('shown');
  }
});

and then change the format() function to accept the additional parameters

function format(d, contact, gender) {