asked on ASP.net date boxes not filtering data
In my ASP.net project I have the following page with two date boxes at the top. When they are selected they are supposed to filter my data table by the [Date Seen] column. The function at the bottom of the page is supposed to do this. For some reason nothing happens. What am I doing wrong?
@page
@model WebApplication1.Pages.Policies.IndexModel
@{
ViewData["Title"] = "Index";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<style>
table {
width: 100%;
}
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
thead {
background-color: #f62d51;
color: white;
}
/*table thead th:first-child {
border-radius: 10px 0 0 0;
}*/
/*table thead th:last-child {
border-radius: 0 10px 0 0;
}*/
/* #datatable-buttons tfoot tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
#datatable-buttons tfoot tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}*/
</style>
<div class="content">
<div class="row">
<div class="col-6">
<div class="page-title-box" style="margin:20px">
<a asp-page="Create" class="btn btn-danger btn-rounded">Add Policy</a>
</div>
</div>
<div class="col-6">
<div class="page-title-box" style="margin:20px;text-align: right;">
<form method="post">
<input type="submit" class="btn btn-primary btn-rounded" value="Export" asp-page-handler="ExportExcel"/>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="page-title-box" style="margin:20px">
<input type="date" id="from" onchange="filter()" />
<input type="date" id="to" onchange="filter()" />
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<table id="scroll-horizontal-datatable" class="table w-100 nowrap">
<thead>
<tr>
<th></th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].PolicyID)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Status)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Underwriter)
</th>
<th>
Policy Number
@Html.DisplayNameFor(model => model.Policy[0].PolicyNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Order)
</th>
<th>
Type Of Risk
</th>
<th>Date Seen</th>
<th>TOBA Check</th>
<th>TOBA Date</th>
<th>
Inception Date
</th>
<th>
Expiry Date
</th>
<th>
Assured Name
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Broker)
</th>
<th>Broker Contact Name</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Country)
</th>
<th>
State/Province
</th>
<th>
Fees
</th>
<th>Turnover</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Profession)
</th>
<th>
Limit Of Indemnity
</th>
<th>
Currency
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Layer)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Deductible)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Reinstatement)
</th>
<th>
Costs Inclusive/Excluding Costs
</th>
<th>
Gross Premium
</th>
<th>
Premium Of Line
</th>
<th>
Net Premium to Aquilano
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Brokerage)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Caytons)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].LCU)
</th>
<th>
Landmark Commission %
</th>
<th>
Total Brokerage
</th>
<th>
Landmark Commission Amount
</th>
<th>
Broker Brokerage Amount
</th>
<th>
Caytons Brokerage Amount
</th>
<th>
LCU Brokerage Amount
</th>
<th>
UK Policy Fee (Landmark Policy Fee)
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].IPT)
</th>
<th>
Net to Landmark
</th>
<th>
Net to Landmark Inc Tax
</th>
<th>
Net to Aquliano (Excl IPT)
</th>
<th>
Due Date
</th>
<th>
Debit Note Issued
</th>
<th>
Debit Note Date
</th>
<th>
Paid Date
</th>
<th>
Paid Amount
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Difference)
</th>
<th>
Bank Ref
</th>
<th>
Paid To Binder
</th>
<th>
Paid To Aquilano Bdx Date
</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Comments)
</th>
<th> @Html.DisplayNameFor(model => model.Policy[0].Binder)</th>
<th>Class of Business</th>
<th>Fee</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Line) %
</th>
<th>Tax</th>
<th>
@Html.DisplayNameFor(model => model.Policy[0].Email)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Policy) {
<tr>
<td>
<a asp-page="./Edit" asp-route-id="@item.PolicyID"><i class="mdi mdi-pencil"></i></a>
<a asp-page="./List" asp-route-id="@item.PolicyID"><i class="mdi mdi-view-list"></i></a>
<a asp-page="./Upload" asp-route-id="@item.PolicyID"><i class="mdi mdi-file-link"></i></a>
<a asp-page="./Details" asp-route-id="@item.PolicyID"><i class="mdi mdi-details"></i></a>
</td>
<td>
@Html.DisplayFor(modelItem => item.PolicyID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td>
@Html.DisplayFor(modelItem => item.Underwriter)
</td>
<td>
@Html.DisplayFor(modelItem => item.PolicyNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.Order)
</td>
<td>
@Html.DisplayFor(modelItem => item.TypeOfRisk)
</td>
<td>
@Convert.ToDateTime(item.DateSeen).ToString("yyyy-MM-dd")
</td>
<td>
@Html.DisplayFor(modelItem => item.TOBA_Check)
</td>
<td>
@Html.DisplayFor(modelItem => item.TOBA_Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.InceptionDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.ExpiryDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.AssuredName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Broker)
</td>
<td>
@Html.DisplayFor(modelItem => item.BrokerContactName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Country)
</td>
<td>
@Html.DisplayFor(modelItem => item.State_Province)
</td>
<td>
@Html.DisplayFor(modelItem => item.Fees)
</td>
<td>
@Html.DisplayFor(modelItem => item.Turnover)
</td>
<td>
@Html.DisplayFor(modelItem => item.Profession)
</td>
<td>
@Html.DisplayFor(modelItem => item.LimitOfIndemnity)
</td>
<td>
@Html.DisplayFor(modelItem => item.Currency)
</td>
<td>
@Html.DisplayFor(modelItem => item.Layer)
</td>
<td>
@Html.DisplayFor(modelItem => item.Deductible)
</td>
<td>
@Html.DisplayFor(modelItem => item.Reinstatement)
</td>
<td>
@Html.DisplayFor(modelItem => item.CostsInclusive_ExcludingCosts)
</td>
<td>
@Html.DisplayFor(modelItem => item.GrossPremium)
</td>
<td>
@Html.DisplayFor(modelItem => item.PremiumOfLine)
</td>
<td>
@Html.DisplayFor(modelItem => item.NetPremiumtoBinder)
</td>
<td>
@Html.DisplayFor(modelItem => item.Brokerage)
</td>
<td>
@Html.DisplayFor(modelItem => item.Caytons)
</td>
<td>
@Html.DisplayFor(modelItem => item.LCU)
</td>
<td>
@Html.DisplayFor(modelItem => item.LandmarkCommission)
</td>
<td>
@Html.DisplayFor(modelItem => item.TotalBrokerage)
</td>
<td>
@Html.DisplayFor(modelItem => item.LandmarkCommissionAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.BrokerBrokerageAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.CaytonsBrokerageAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.LCUBrokerageAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.LandmarkPolicyFee)
</td>
<td>
@Html.DisplayFor(modelItem => item.IPT)
</td>
<td>
@Html.DisplayFor(modelItem => item.NettoLandmark)
</td>
<td>
@Html.DisplayFor(modelItem => item.NettoLandmarkIncTax)
</td>
<td>
@Html.DisplayFor(modelItem => item.NettoBinder)
</td>
<td>
@Html.DisplayFor(modelItem => item.DueDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.DebitNoteIssued)
</td>
<td>
@Html.DisplayFor(modelItem => item.DebitNoteDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.PaidDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.PaidAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.Difference)
</td>
<td>
@Html.DisplayFor(modelItem => item.BankRef)
</td>
<td>
@Html.DisplayFor(modelItem => item.PaidToBinder)
</td>
<td>
@Html.DisplayFor(modelItem => item.PaidToAquilanoBdxDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.Comments)
</td>
<td>
@Html.DisplayFor(modelItem => item.Binder)
</td>
<td>
@Html.DisplayFor(modelItem => item.Class_Business)
</td>
<td>
@Html.DisplayFor(modelItem => item.Fee)
</td>
<td>
@Html.DisplayFor(modelItem => item.Line)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tax)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
@* <td>
<a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
<a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
<a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
</td>*@
</tr>
}
</tbody>
</table>
</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
<!-- end row-->
</div>
@section Scripts {
function filter() {
var from = $("#from").val(), to = $("#to").val();
if (from) from = new Date(from);
if (to) to = new Date(to);
if (from) {
if (to)
f = d => d >= from && d <= to;
else
f = d => d >= from;
}
else {
if (to)
f = d => d <= to;
else
f = _ => true;
}
$("#scroll-horizontal-datatable tbody tr").each(function (_, r) {
if (f(new Date($("[data-date]", r).data("date"))))
$(r).show();
else
$(r).hide();
})
}
}
ASP.NET
Last Comment
louisfr
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.