jQuery DataTable：请求日期列搜索行无法显示日期选择器问题

问题说明 #

• 将tfoot作为各列的单独搜索行，但请求日期列仅显示文本输入框，无法唤起日期选择器；
• 日期选择器功能正常，但错误显示在表头区域，需要将其移至表头上方的搜索行（即tfoot插入后的位置）。

原代码 #

HTML部分

<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>

JS部分

$(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 = '';
                       column.footer().replaceChildren(input);

                       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();
                           }
                       });
                   });
           }
       });
 });

解决方案 #

问题核心：

1. 日期选择器被错误插入到表头（column.header().appendChild(datepickerInput)），而非搜索行对应的tfoot单元格；
2. 无论是否是日期列，最后都用普通input覆盖了tfoot单元格内容，导致日期选择器被替换。

修正后的JS代码：

$(document).ready(function () {
    new DataTable('#dtbl', {
        "dom": 'rtip',
        "order": [[0, 'desc'], [2, 'asc']],
        initComplete: function () {
            // 将tfoot移到thead上方作为搜索行
            $('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'));
            this.api().columns().every(function () {
                let column = this;
                let title = column.footer().textContent;
                column.footer().innerHTML = ''; // 清空单元格

                if (title === "Request Date") {
                    // 创建日期选择器输入框
                    let datepickerInput = document.createElement('input');
                    datepickerInput.type = "text";
                    datepickerInput.id = "datepicker";
                    datepickerInput.placeholder = "Search " + title;
                    // 统一样式
                    $(datepickerInput).css({
                        "width": "100%",
                        "padding": "0",
                        "margin": "0",
                        "height": $(column.header()).height() + "px",
                        "box-sizing": "border-box"
                    });
                    // 初始化日期选择器并绑定搜索事件
                    $(datepickerInput).datepicker({
                        dateFormat: 'yy-mm-dd',
                        onSelect: function (dateText) {
                            column.search(dateText).draw();
                        }
                    });
                    // 插入到tfoot单元格
                    column.footer().appendChild(datepickerInput);
                } else {
                    // 普通列创建文本搜索框
                    let input = document.createElement('input');
                    input.placeholder = "Search " + title;
                    $(input).css({
                        "width": "100%",
                        "padding": "0",
                        "margin": "0",
                        "height": $(column.header()).height() + "px",
                        "box-sizing": "border-box"
                    });
                    column.footer().appendChild(input);
                    // 绑定键盘搜索事件
                    input.addEventListener('keyup', () => {
                        if (column.search() !== input.value) {
                            column.search(input.value).draw();
                        }
                    });
                }
            });
        }
    });
});

修正说明 #

• 日期列的选择器直接插入到tfoot对应单元格，而非表头；
• 拆分普通列与日期列的逻辑，避免覆盖问题；
• 统一所有搜索框样式，保持视觉一致；
• 保留原有搜索逻辑，确保功能正常。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz