嗨,我有问题要更改html内容,这是由ajax
生成的这是页面的代码:
@model IEnumerable<WE_SRW_PeerNissen.Models.Reservations>
@{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Übersicht Liste</h2>
<form method="post" action="List">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" name="searchbar" placeholder="Search">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
<table class="table" id="sorttable">
<thead bgcolor="white">
<tr>
<th>
@Html.DisplayNameFor(model => model.BookingNr)
</th>
<th>
@Html.DisplayNameFor(model => model.Arrival)
</th>
<th>
@Html.DisplayNameFor(model => model.Departure)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Appartment)
</th>
<th>
@Html.DisplayNameFor(model => model.Adult)
</th>
<th>
@Html.DisplayNameFor(model => model.Children)
</th>
<th>
@Html.DisplayNameFor(model => model.Total)
</th>
</tr>
</thead>
</table>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#sorttable').DataTable({
"ajax": {
"url": "/OverView/loaddata",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "BookingNr", "autoWidth": true },
{ "data": "Arrival", "autoWidth": true },
{ "data": "Departure", "autoWidth": true },
{ "data": "Name", "autoWidth": true },
{ "data": "Appartment", "autoWidth": true },
{ "data": "Adult", "autoWidth": true },
{ "data": "Children", "autoWidth": true },
{ "data": "Total", "autoWidth": true },
]
});
});
</script>
一个生成的示例:
<div class="dataTables_filter" id="sorttable_filter">
<label>Search:
<input aria-controls="sorttable" type="search" placeholder="">
</label>
</div>
我认为这是我最好的尝试:
<script>
$(document).ready(function () {
$(document).on(function () {
$('#sorttable_filter label:eq(1)').text('Suchen:');
});
});
</script>
我在Ajax脚本下方设置的,我还尝试将其放在下面的同一脚本标签中,以确保执行Ajax
一些评论...
jquery on()方法将函数绑定到特定事件,例如:$(themS).on(" click",dosomething),您只提供一个函数,因此它不知道将您的功能绑定到什么事件。
然后,eq(1)是jQuery方法,而不是CSS选择器,因此您想使用"标签:第一子女"(如果需要第一个)。但是,由于它在标签元素内部,它将破坏示例HTML中的输入字段,因此您(可能)希望将其放在外面。在无法更改HTML输出的情况下
$(document).ready(function() {
var labelEl = document.querySelector("#sorttable_filter label:first-child");
var inputEl = labelEl.querySelector("input");
labelEl.parentNode.appendChild(inputEl);
labelEl.innerText = 'Suchen:';
});
我不喜欢的事实是,document.ready()可能会在出现实际元素之前发生一段时间,因此您想至少查找结果HTML出现...