通过模型 MVC 加载时数据表的隐藏详细信息选项
Hidden details option of dataTables when loaded through model MVC
我有 table 名员工,我使用 $.load
ajax 呼叫通过发回 partialview
来获取,如下所示:
型号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 方法
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 视图
@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>
从 this link 我能够实现 UI
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');
}
});
我的问题是:
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
上面给出的演示 link 使用 .txt
文件提取数据,但没有提到如何根据我的上述场景使用 model
数据执行此操作。 +
link 和 -
link 工作正常,但未显示 Contact
和 Gender
的模型值。我正在考虑的一种情况是将所有这些作为 td
s 添加到 foreach
中并隐藏它们,以便我可以获得列值,因为我现在正在获取显示数据。但是当有大量的列要显示时,这会很重。任何关于此的 ideas/lights 都非常感谢。
一种选择是将 'extra' 值作为 data-*
属性添加到 table 行中。
@foreach(var emp in Model)
{
<tr data-contact="emp.contact" data-gender="emp.Gender">
....
</tr>
}
然后在按钮单击事件中提取它们并将这些值传递给 format()
函数
$('#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');
}
});
然后更改 format()
函数以接受附加参数
function format(d, contact, gender) {
我有 table 名员工,我使用 $.load
ajax 呼叫通过发回 partialview
来获取,如下所示:
型号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 方法
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 视图
@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>
从 this link 我能够实现 UI
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');
}
});
我的问题是:
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
上面给出的演示 link 使用 .txt
文件提取数据,但没有提到如何根据我的上述场景使用 model
数据执行此操作。 +
link 和 -
link 工作正常,但未显示 Contact
和 Gender
的模型值。我正在考虑的一种情况是将所有这些作为 td
s 添加到 foreach
中并隐藏它们,以便我可以获得列值,因为我现在正在获取显示数据。但是当有大量的列要显示时,这会很重。任何关于此的 ideas/lights 都非常感谢。
一种选择是将 'extra' 值作为 data-*
属性添加到 table 行中。
@foreach(var emp in Model)
{
<tr data-contact="emp.contact" data-gender="emp.Gender">
....
</tr>
}
然后在按钮单击事件中提取它们并将这些值传递给 format()
函数
$('#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');
}
});
然后更改 format()
函数以接受附加参数
function format(d, contact, gender) {