javascript - 当标题顺序更改时，使用状态保存的数据表过滤器会导致问题

Question

我有一个 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>

这是我的 javascript 代码:

    var dtGridHelpDesk;
    var EmployeeName;
    var EmployeeID;
    var Email;

    $(document).ready(function () {
        InitializerHelpDeskGRID()
    })

    function InitializerHelpDeskGRID() {

        $('.filter').each(function () {
            var title = $(this).text();
            var classForFilter = $(this).text();
            classForFilter = classForFilter.split(' ').join('');

            $(this).html('<input type="text" class="form-control input-sm ' + classForFilter + '" placeholder="' + title + '" onclick="event.stopPropagation()" onkeypress="event.stopPropagation()" />');

        });

        dtGridHelpDesk = $('#gridHelpDesk').dataTable({
            scrollCollapse: true,
            serverSide: true,
            ajax: {
                url: '@Url.Content("~/Home/GetHelpdeskData")',
                data: SearchHDParams,
                dataSrc: HDGridDataBound,
                type: "POST"
            },
            processing: true,
            processing: "<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate' />",
            bDestroy: true,
            select: true,
            paging: false,
            bLengthChange: false,
            info: false,
            ordering: false,
            searching: true,
            stateSave: true,
            stateLoadParams: function (settings, data) {
                if (data.order) delete data.order;
            },
            columnDefs: [
            {
                targets: 0,
                data: "EmployeeID",

            },
            {
                targets: 1,
                data: "EmployeeName",
            },
            {
                targets: 2,
                data: "Email",
            },
            {
                targets: 3,
                data: "SurveyStatus"
            },
            {
                targets: 4,
                data: "StartedDate"
            },
            {
                targets: 5,
                data: "CompleteDate"
            },
            {
                targets: 6,
                data: "PositionNumber",
                render: function (data, type, full, meta) {
                    return '<button class="btn btn-info btn-sm" onclick="CopyLink(this, \'' + full.SurveyLink + '\')"> Copy </button>'
                }
            },
            {
                targets: 7,
                data: "PositionNumber",
                render: function (data, type, full, meta) {
                    return '<button class="btn btn-success btn-sm" onclick="ReActivateLink(this, \'' + full.PositionNumber + '\')"> ReActivate </button>'
                }
            },
            {
                targets: 8,
                data: "PositionNumber",
                render: function (data, type, full, meta) {
                    return '<button class="btn btn-warning btn-sm" onclick="DeleteResponses(this, \'' + full.PositionNumber + '\')"> Delete & ReActivate </button>'
                }
            },
            {
                targets: 9,
                data: "PositionNumber",
                render: function (data, type, full, meta) {
                    return '<button class="btn btn-default btn-sm" onclick="UpdateLink(this, \'' + full.PositionNumber + '\')"> Create </button>'
                }
            },
            {
                targets: 10,
                data: "PositionNumber",
                render: function (data, type, full, meta) {
                    return '<button class="btn btn-danger btn-sm" onclick="SendReminder(this, \'' + full.PositionNumber + '\')"> Send Reminder </button>'
                }
            }]
        });

        var state = dtGridHelpDesk.api().state.loaded();
        if (state) {
            dtGridHelpDesk.api().columns().eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;
                if (colSearch.search) {
                    $('input', dtGridHelpDesk.api().column(colIdx).header()).val(colSearch.search);
                }
            });

            dtGridHelpDesk.api().draw();
        }

        dtGridHelpDesk.api().columns().eq(0).each(function (colIdx) {
            $('input', dtGridHelpDesk.api().column(colIdx).header()).on('keyup change', function () {
                dtGridHelpDesk.api()
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });
    }

    function SearchHDParams(d) {
        d.EmployeeName = $('.SearchEmployeeName').val()
        d.EmployeeID = $('.SearchEmployeeID').val()
        d.Email = $('.SearchEmployeeEmail').val()
    }

    function HDGridDataBound(response) {
        if (response.IsSuccess == true) {
            return response.gridData;
        }
        else {
            toastr.error("Something went wrong, Please try again after some time.");
        }
    }

奇怪的是，如果我在 html 中更改标题行的顺序，我的 javascript 代码就会失败。例如，如果我将 search header 与 html 中的文本交换，如下所示，那么我的 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>

为什么会发生这种情况，我该如何解决？我不明白为什么交换 html 中项目的顺序会像这样破坏我的 javascript，我也没有看到解决问题的明确方法。

我已经尝试了很多可能的解决方案，但是当我根据我的函数 (SearchHDParams) 加载数据时，javascript 覆盖了状态。因此，到目前为止，我的解决方案都没有奏效。感谢您的帮助。

Answer 1

原因

您的代码 dtGridHelpDesk.api().column(colIdx).header() 从不包含 input< 的底部标题行返回 th 单元格 切换标题行顺序后的元素。

解决方案 1

根据您编写代码的方式，最简单的解决方案是使用 orderCellsTop选项。当您调用 column().header() 时，它将使 DataTables 从顶部标题行返回 th 单元格API方法。

"orderCellsTop": true

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

解决方案 2

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

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

与:

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

此代码在两个标题行的 th 单元格中查找搜索框，而不仅仅是底部的一个。