Javascript 带有statesave的datatables筛选器在标头顺序更改时导致问题

我有一个

html

页面和一些javascript代码。下面是我的工作

html

：

<table class="table table-hover" id="gridHelpDesk">
    <thead>
        <tr>
            <th class="color-white">Employee ID</th>
            <th class="color-white">Name</th>
            <th class="color-white">Email</th>
            <th class="color-white">Survey Status</th>
            <th class="color-white">Start Date</th>
            <th class="color-white">Completed Date</th>
            <th class="color-white">Survey Link</th>
            <th class="color-white">Reactivate Link</th>
            <th class="color-white">Delete Responses</th>
            <th class="color-white">Create New Link</th>
            <th class="color-white">Send Reminder</th>
        </tr>
        <tr>
            <th class="filter">Search Employee ID</th>
            <th class="filter">Search Employee Name</th>
            <th class="filter">Search Employee Email</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
</table>

奇怪的是，如果我更改

html

中标题行的顺序，我的

javascript

代码就会失败。例如，如果我用

html

中的文本交换

search

标题，如下所示，那么我的

javascript

代码将失败

 <table class="table table-hover" id="gridHelpDesk">
    <thead>     
        <tr>
            <th class="filter">Search Employee ID</th>
            <th class="filter">Search Employee Name</th>
            <th class="filter">Search Employee Email</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>      
        <tr>
            <th class="color-white">Employee ID</th>
            <th class="color-white">Name</th>
            <th class="color-white">Email</th>
            <th class="color-white">Survey Status</th>
            <th class="color-white">Start Date</th>
            <th class="color-white">Completed Date</th>
            <th class="color-white">Survey Link</th>
            <th class="color-white">Reactivate Link</th>
            <th class="color-white">Delete Responses</th>
            <th class="color-white">Create New Link</th>
            <th class="color-white">Send Reminder</th>
        </tr>          
    </thead>
</table>

搜索员工ID
搜索员工姓名
搜索员工电子邮件
员工ID
名称
电子邮件
调查状况
开始日期
完成日期
调查链接
重新激活链接
删除响应
创建新链接
发送提醒

为什么会发生这种情况，我如何修复它？我不明白为什么在我的

html

中交换项目的顺序会像这样破坏我的javascript，我也看不到解决问题的明确方法

我已经尝试了许多可能的解决方案，但是当我基于我的函数（SearchHDParams）加载数据时，

javascript

会覆盖状态。因此，到目前为止，我的解决方案都没有奏效。感谢您的帮助。

原因 您的代码

dtGridHelpDesk.api（）.column（colIdx）.header（）

在切换标题行的顺序后返回底部标题行中不包含

input

元素的

th

单元格

解决方案1 按照编写代码的方式，最简单的解决方案是使用该选项。当您调用API方法时，它将使DataTables从顶部标题行返回

th

单元格

"orderCellsTop": true

现在不会引起任何问题，因为您已禁用订购。如果您决定稍后启用排序，此解决方案将导致问题，因为您的顶行具有搜索框而不是列标题

解决方案2 更好的解决方案是替换代码：

$('input', dtGridHelpDesk.api().column(colIdx).header())

与：

---

此代码在两个标题行的

th

单元格中查找搜索框，而不仅仅是底部的一行。

您能否对代码进行修改，一个有效的示例不清楚出了什么问题。你能澄清问题是什么吗？发生了什么不应该发生，或者发生了什么不应该发生？（我认为您实际上只需要更改JS代码中的列说明符，但没有更多信息，很难说。）@MaxvonHippel我试过了，但对我没有帮助。@MaxvonHippel感谢您的编辑。。

$('input', dtGridHelpDesk.api().column(colIdx).header())

$('input', $('th', dtGridHelpDesk.api().table().header()).eq($(dtGridHelpDesk.api().column(colIdx).header()).index()))