我有一个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 code:
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覆盖状态。因此，到目前为止我的解决方案都不起作用。任何帮助表示赞赏。
