提问人：ahmed abdelaziz 提问时间：11/12/2023 更新时间：11/13/2023 访问量：14
请求日期不显示为日期选择器，尽管我在搜索时绘制了日期选择器？
Request Date not display as date picker although I draw date picker when make search?
问：
我在jQuery数据表上工作，我面临问题请求日期，不显示与日期选择器相关的搜索。
tfootsection 是单独搜索任何列的行。
搜索正在请求日期作为输入文本。
但唯一的问题是我无法解决它，请求日期显示为输入文本
期望的结果是将请求日期显示为启用搜索的日期选择器
请求日期搜索作为日期选择器工作成功，但在标题上（错误的位置）。
我需要在标题上方的搜索行上显示带有日期选择器的请求日期。
为什么我尝试如下
<table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;
padding-right:7px;">
<thead>
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid black;">
Request No
</th>
<th style="border: 1px solid black;">
Employee No
</th>
<th style="border: 1px solid black;">
Employee Name
</th>
<th style="border: 1px solid black;">
Request Date
</th>
<th style="border: 1px solid black;">
Reason
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr style="background-color: #f2f2f2;">
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.RequestNo)
</td>
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.EmpID)
</td>
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.EmpName)
</td>
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.ResignationSubmissionDate)
</td>
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.Reason)
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Request No</th>
<th>Employee No</th>
<th>Employee Name</th>
<th>Request Date</th>
<th>Reason</th>
</tr>
</tfoot>
</table>
</div>
$(document).ready(function () {
new DataTable('#dtbl', {
"dom": 'rtip',
"order": [[0, 'desc'], [2, 'asc']],
initComplete: function () {
$('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))
this.api()
.columns()
.every(function () {
let column = this;
let title = column.footer().textContent;
let input = document.createElement('input');
input.placeholder = title;
$(input).css({
"width": "100%",
"padding": "0",
"margin": "0",
"height": $(column.header()).height() + "px",
"box-sizing": "border-box"
});
column.footer().innerHTML = ''; // Clear the footer cell
column.footer().replaceChildren(input);
var input22;
if (title === "Request Date") {
let datepickerInput = document.createElement('input');
datepickerInput.type = "text";
datepickerInput.id = "datepicker";
datepickerInput.placeholder = "Search " + title;
$(datepickerInput).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText) {
column.search(dateText).draw();
}
});
column.header().appendChild(datepickerInput);
}
else {
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
}
$(column.footer()).html(input);
input.addEventListener('keyup', () => {
if (column.search() !== this.value) {
column.search(input.value).draw();
}
});
});
}
});
});
预期结果如下图所示
答：
0赞
Yong Shun
11/13/2023
#1
问题出在这一行：
let datepickerInput = document.createElement('input');
这将创建另一个元素并添加到表头中。<input>
您应该恢复以前创建的元素。<input>
let datepickerInput = input;
此外，从您的代码中，有一些代码是多余的，不需要将元素添加到表头中。简化代码如下：<input>
initComplete: function () {
$('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'));
this.api()
.columns()
.every(function () {
let column = this;
let title = column.footer().textContent;
let input = document.createElement('input');
input.placeholder = title;
$(input).css({
width: '100%',
padding: '0',
margin: '0',
height: $(column.header()).height() + 'px',
'box-sizing': 'border-box',
});
column.footer().innerHTML = ''; // Clear the footer cell
column.footer().replaceChildren(input);
var input22;
if (title === 'Request Date') {
let datepickerInput = input;
datepickerInput.type = 'text';
datepickerInput.id = 'datepicker';
datepickerInput.placeholder = 'Search ' + title;
$(datepickerInput).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText) {
column.search(dateText).draw();
},
});
}
input.addEventListener('keyup', () => {
if (column.search() !== this.value) {
column.search(input.value).draw();
}
});
});
}
评论