c# - Hidden details option of dataTables when loaded through model MVC -

i have table of employees fetch using $.load ajax call sending partialview 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 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 } 

_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 able achieve ui whatever given in 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` original data object row     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+         '<tr>'+             '<td>full name:</td>'+             '<td>'+d["full name"]+'</td>'+ //this fine         '</tr>'+         '<tr>'+             '<td>extension number:</td>'+             '<td>'+d["contact details"]+'</td>'+ //need contact here         '</tr>'+         '<tr>'+             '<td>gender:</td>'+             '<td>d["gender"]</td>'+ //need gender here         '</tr>'+     '</table>'; }  // add event listener opening , closing details $('#employee tbody').on('click', 'td.details-control', function () {     var tr = $(this).closest('tr');     var row = table.row( tr );      if ( row.child.isshown() ) {         // row open - close         row.child.hide();         tr.removeclass('shown');     }     else {         // open row         row.child( format(row.data()) ).show();         tr.addclass('shown');     }  }); 

my question here is:

i have model filled data how display data in model (contact),(gender) in format function

the demo given in above link uses .txt files extract data mentioned how model data according above scenario. + link , - links working fine except model values contact , gender not getting displayed. 1 scenario thinking of add these tds in foreach , hide them can column values getting displayed data. heavy when there huge amount of columns displayed. ideas/lights on appreciated.

one option add 'extra' values data-* attributes in table row.

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

and extract them in buttons click event , pass values 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');   // add following option using row data   var fullname = tr.children('td').eq(1).text();   var row = table.row( tr );   if ( row.child.isshown() ) {     // row open - close     row.child.hide();     tr.removeclass('shown');   } else {     // open row     row.child(format(row.data(), contact, gender)).show();     // or row.child(format(fullname, contact, gender)).show();     tr.addclass('shown');   } }); 

and change format() function accept additional parameters

function format(d, contact, gender) {