我有一个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覆盖了状态。因此，到目前为止，我的解决方案都没有奏效。任何帮助表示赞赏。
答案 0 :(得分：2)
您的代码dtGridHelpDesk.api().column(colIdx).header()会在切换标题行顺序后从底部标题行返回th个单元格，但不包含input元素。
编写代码的方式，最简单的解决方案是使用orderCellsTop选项。当您调用column().header() API方法时，它会使DataTable从顶部标题行返回th个单元格。
"orderCellsTop": true
现在不会导致任何问题，因为您已禁用订购。如果您决定稍后启用排序，此解决方案将导致问题，因为您的顶行有搜索框而不是列标题。
更好的解决方案是替换代码：
$('input', dtGridHelpDesk.api().column(colIdx).header())
使用：
$('input', $('th', dtGridHelpDesk.api().table().header()).eq($(dtGridHelpDesk.api().column(colIdx).header()).index()))
此代码在两个标题行的th单元格中查找搜索框，而不仅仅是底部行。