我有一个页面，它显示与出勤详细信息的客户名称.我已经显示了一个模态弹出窗口内的出勤详细信息.数据显示在一个模态弹出窗口使用jquery datatables与过滤选项（搜索，分页..）.
我在这里面临的问题是过滤选项只适用于第一个客户，当它来为第二个客户，它是不显示.我试图通过数据表的客户ID.但它不显示第二/第三个客户的过滤选项.
请在下面找到我的代码和截图。感谢您的帮助。
<!---Customer Div Starts Here---->
@for (int i = 0; i < groups.Count(); i += 4)
{
<div class="row mt-2">
@{
int j = 0;
for (; j <= 3 && i + j < groups.Count(); j++)
{
//if(Model.GetCusAttOverview[i+j].AttendancePercentage != 0){
<div class="col-md-3">
<div class="card border-0" style="height:440px;">
<div class="card-header" style="background-image: linear-gradient(#f1b52c, #ce6d28)">
<a class="text-decoration-none" target="_blank" asp-page="/AttReport" asp-route-customerId="@Model.GetCusAttOverview[i+j].CustomerID"><h4 class="text-center text-white"> @groups[i+j].ToUpper()</h4></a>
</div>
<div class="card-body pb-0" style="background: rgba(57,57,57)">
<div class="row">
<div class="col-md-12">
@{
int n = @Model.GetCusAttOverview[i + j].AttendancePercentage;
var BarColor = @Model.OnGetBarColor(n);
BarColor.ToString();
}
<div class="overallchart" data-percent="@Model.GetCusAttOverview[i+j].AttendancePercentage" data-barcolor="@BarColor.Content">@Model.GetCusAttOverview[i+j].AttendancePercentage%</div>
</div>
</div>
</div>
<div class="card-footer" style="background: rgb(57,57,57); ">
<div class="row">
<div class="col-md-6">
<h6 class="text-center text-white p-3">TOTAL EMPLOYEES</h6>
</div>
<div class="col-md-6">
@{
string CustName = groups[i+j].Replace(",", "").Replace("&", "").Replace("(", "").Replace(")", "").Replace("'", "").Replace(" ", "");
}
<h6 class="text-center text-white p-3"> ATTENDANCE <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalCustAttendance_@CustName"><i class="fa-solid fa-circle-info fa-2" style="color: #009add;"></i></a></h6>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-image:linear-gradient(to right,#009add,#005486)">
<h3 class="text-center text-white">@Model.GetCusAttOverview[i+j].TotalEmployees</h3>
</div>
<div class="col-md-6" style="background-image:linear-gradient(to right,#82bc00,#006432)">
<h3 class="text-center text-white">@Model.GetCusAttOverview[i+j].Attendance</h3>
</div>
</div>
</div>
</div>
<div class="modal" id="modalCustAttendance_@CustName" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Attendance Details - @Model.GetCusAttOverview[i + j].CustomerName</h4>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row mb-2">
<div class="col-md-12">
<form method="post" enctype="multipart/form-data">
<input asp-for="@Model.CustomerId" type="hidden" value='@Model.GetCusAttOverview[i + j].CustomerID' id="hdnCustomerId"/>
<button asp-page-handler="Download" class="btn float-end" style="background-color:#009add">Download Report</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover" id="data" style="width:100%">
<thead>
<tr>
<th>
Employee Number
</th>
<th>
Employee Name
</th>
<th>
Function
</th>
<th>
Shift
</th>
<th>
Attendance
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.GetCusOverviewAttendance.Where(c => c.CustomerID == Model.GetCusAttOverview[i + j].CustomerID))
{
string FontColor = "";
@if (item.Attendance == "Absent")
{
FontColor = "Red";
}
<tr>
<td style='color: @(FontColor);'>
@Html.DisplayFor(modelItem => item.EmployeeNumber)
</td>
<td style='color: @(FontColor);'>
@Html.DisplayFor(modelItem => item.EmployeeName)
</td>
<td style='color: @(FontColor);'>
@Html.DisplayFor(modelItem => item.FunctionName)
</td>
<td style='color: @(FontColor);'>
@Html.DisplayFor(modelItem => item.ShiftName)
</td>
<td style='color: @(FontColor);'>
@Html.DisplayFor(modelItem => item.Attendance)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
</div>
</div>
</div>
</div>
</div>
//}
}
}
</div>
}
<script>
$(document).ready(function () {
$('#data').DataTable()({
'searching': true
})
});
</script>字符串
x1c 0d1x的数据
的
2条答案
按热度按时间yduiuuwa1#
这是因为所有的表都拥有相同的id（在本例中为
data），所以您需要为每个表给予唯一的id。对于您当前的代码，您可以像下面这样更改表ID：
字符串
然后像下面这样修改你的js代码：
型
fd3cxomn2#
这条线对吗？
字符串
应该是的
型