问题描述
我正在使用 asp.net-mvc 并且我有一个模型可以将数据发送到我视图中的数据表。我正在尝试实现一个功能，让我使用日期时间选择器来过滤数据，以便它只显示日期与用户输入相匹配的数据。我尝试了几种不同的方法，但我无法找到解决方案。我提供了控制器区域和我的数据表设置只是为了以防万一，但我认为它们不是解决方案所必需的，因为我只需要它在视图中。有人有什么想法吗？
我的观点
<div class="col-12 mx-auto">
@{
var vm = new DatatableJSLib.Models.viewmodels.vmDatatables("datatable",true,Url.Action("listForms","_api"),new string[] { "Id","Date Created","First Name","Last Name","Reason","Meeting Date","Actions" });
}
<partial name="Partials/Datatable" model="vm" />
</div>
这个视图控制器
public async Task<IActionResult> listForms(DatatablesRequest table_req)
{
table_req.RecordsTotal = _context.FormData.Count();
var filtered = _context.FormData.AsQueryable();
if (!String.IsNullOrEmpty(table_req.search.value))
{
filtered = filtered.Where(s => s.DateCreated > DateTime.Parse(table_req.search.value));
}
table_req.RecordsFiltered = filtered.Count();
/*table_req.Data*/
var temp = filtered
.Select(f => new { f.Id,f.DateCreated,f.ApplicantFirstName,f.ApplicantLastName,f.ReasonBeforeCouncil,f.DesAppearanceDate });
var only_care_about_this = table_req.order[0];
if (only_care_about_this.index == 1)
{
if (only_care_about_this.dir == "desc")
temp = temp.OrderByDescending(m => m.DateCreated);
else
temp = temp.OrderBy(m => m.DateCreated);
}
table_req.Data = temp.Select(s => new string[] { s.Id.ToString(),s.DateCreated.ToString("MM/dd/yyyy"),s.ApplicantFirstName,s.ApplicantLastName,s.ReasonBeforeCouncil,s.DesAppearanceDate.ToString("MM/dd/yyyy"),$@"<a class=""mx-1"" href=""/Form/Edit/{s.Id}"" data-toggle=""tooltip"" data-placement=""left"" title=""Edit"" style=""cursor:pointer;""><i class=""fa fa-pencil fa-fw"" style=""color:dodgerblue;""></i></a>"+
$@"<a class=""mx-1"" href=""/Form/Details/{s.Id}"" data-toggle=""tooltip"" data-placement=""top"" title=""Details"" style=""cursor:pointer;""><i class=""fa fa-eye"" style=""color:dodgerblue;""></i></a>"+
$@"<a class=""mx-1"" asp-action=""EmailApplicant"" asp-controller=""Form"" asp-route-id=""{s.Id }"" data-toggle=""tooltip"" data-placement=""left"" title=""Email""><i class=""fa fa-envelope"" style=""color:dodgerblue;""></i></a>"+
$@"<a class=""mx-1"" href=""/Form/Delete/{s.Id}"" data-toggle=""tooltip"" data-placement=""right"" title=""Delete"" style=""cursor:pointer;""><i class=""fa fa-trash"" style=""color:dodgerblue;""></i></a>" })
.Skip(table_req.start)
.Take(table_req.length)
.ToList();
return Json(table_req.Response);
}
数据表设置
@model DatatableJSLib.Models.viewmodels.vmDatatables
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<table class="table-responsive-sm" id="@Model.Selector" style="width:100%">
<thead>
<tr>
@*Add The Headers to the table*@
@foreach (var header in Model.Headers)
{
<th>@header</th>
}
</tr>
</thead>
</table>
<script>
@*Make sure that the function is not defined multiple times*@
if (typeof AddDataTable === typeof (undefined)) {
@*for Now only the table selector,is server side,and the actior url are dynamic*@
AddDataTable = function (selector,server_side,url) {
let __datatablejs_config = {
"processing": true,"serverSide": false,"ajax": {
url: '',type: 'POST'
},"pagingType": "simple_numbers","dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12't>>" +
"<'row'<'col-sm-12'r>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>","responsive": true,"flag": false,"columnDefs": [
@for(var i = 0; i < Model.Headers.Count(); i++)
{
if (i != 0) {
@(Html.Raw(",\n"))
}
@Json.Serialize(new { name = Model.Headers[i],targets = i })
}]
}
@*Make sure a valid CSS selector is available*@
if (selector && selector[0] == '#') {
@* Destroy any tables with the selector that already exist *@
if ($.fn.DataTable.isDataTable(selector)) {
$(selector).DataTable().clear().destroy();
}
@* set some classes *@
$(`${selector} tbody`).empty();
$.fn.dataTable.ext.classes.sPageButton = 'page-item';
$.fn.dataTable.ext.classes.sInfo = 'font-weight-light ';
$.fn.dataTable.ext.classes.sPaging = 'dataTables_paginate mw-60 paging_';
$.fn.DataTable.ext.pager.numbers_length = 5;
@* Set server side information if needed *@
if (!!server_side && !!url) {
__datatablejs_config.serverSide = server_side;
__datatablejs_config.ajax.url = url;
}
@* Initialize table *@
var table = $(selector).DataTable(__datatablejs_config);
@* Add the Table Headers *@
let headers = table.columns().header().toArray().map(x => x.innerText.trim()).filter(function (el) { return el; });
$('.dataTables_filter input').attr('data-toggle','tooltip')
.attr('data-placement','left')
.attr('data-html','true')
@*// .attr('title',`<span>You can search by: <br/><p id="tooltip-left"> ${headers.join('<br/>')}</p></span>`); does not work at the moement *@
@* $('[data-toggle="tooltip"]').tooltip(); *@
}
else if (selector[0] != '#') {
console.log(`Incorrect selector argument: ${selector}. Selector should start w/ # for ID attributes.`)
}
}
}
var hasTrigger = @(!String.IsNullOrEmpty(Model.TriggerSelector) ? 1 : 0 );
if (!hasTrigger) {
AddDataTable(`#@Model.Selector`,"@Model.IsServerSide","@Model.Url");
}
</script>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）