当标题顺序发生变化时，数据表过滤器会导致stateave导致问题

时间：2017-05-10 12:29:44

标签： javascript 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>

这是我的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.");
        }
    }

奇怪的是，如果我更改javascript中标题行的顺序，则我的html代码会失败。例如，如果我将search标头与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覆盖了状态。因此，到目前为止，我的解决方案都没有奏效。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分：2)

原因

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

解决方案1 ​​

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

"orderCellsTop": true

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

解决方案2

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

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

使用：

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

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

相关问题
最新问题