Hidden information about dataTables parameters when loading via MVC model

Question

I have a staff table that I get by calling $.load ajax, sending back a partialview , as shown 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 the 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 reach the UI 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 is:

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

The demo in the link above uses .txt files to extract the data, but nowhere is it mentioned how to do this with the model data according to my above scenario. The + and - relationships work fine, except that the model values ​​for Contact and Gender not displayed. One of the scenarios that I think of adds all of this as td in foreach and hides them so that I can get the column values, since now I get the displayed data. But then it will be difficult when a huge number of columns will be displayed. Any ideas / lights on this are greatly appreciated.

Answer 1

One option is to add “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 button click event and pass these 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 additional parameters

 function format(d, contact, gender) {