Question

您好我有问题需要更改由AJAX生成的HTML内容

这是页面的代码：

@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被执行

Answer 1

一些评论......

jQuery on（）方法将函数绑定到特定事件，例如：$（something）.on（＆＃34; click＆＃34;，doSomething）并且你只提供一个函数，因此它不知道什么事件将你的函数绑定到。

然后，eq（1）是jQuery方法，但不是CSS选择器，因此你想使用＆＃34; label：first-child＆＃34; （如果你需要第一个）。但是，它会破坏示例HTML中的输入字段，因为它位于标签元素中，因此您（可能）希望将其放在外部。在您无法更改HTML输出的情况下，您可以使用＆＃34;移动＆＃34;标签元素之外的输入副本......像这样

＆＃13;

$(document).ready(function() {
  var labelEl = document.querySelector("#sorttable_filter label:first-child");
  var inputEl = labelEl.querySelector("input");
  labelEl.parentNode.appendChild(inputEl);
  labelEl.innerText = 'Suchen:';
});

＆＃13;

我不喜欢的事实是document.ready（）可能会在实际元素出现之前发生一段时间，因此您希望至少查找结果HTML外观...

如何更改Ajax生成的HTML-Content

1 个答案: