There is a table of this type:

<table id="UsersTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>ФИО</th> <th>Компания</th> <th>Должность</th> <th>Телефон</th> </tr> </thead> @foreach (var items in Model) { <tr> <td id ="idrow" class="details-control" data-assigned-id="@items.ADUsersId">@items.ADUsersId</td> <td>@Html.DisplayFor(modelItem => items.DisplayName)</td> <td>@Html.DisplayFor(modelItem => items.Company)</td> <td>@Html.DisplayFor(modelItem => items.Department)</td> <td>@Html.DisplayFor(modelItem => items.TelephoneNumber)</td> </tr> } </table>

Everything works fine, sort of like, but in jQuery I'm not really strong. The fact is that when you click a button, the list opens in the column and the button should change accordingly, but this does not happen to me.

enter image description here

When pressed, a button with a minus should appear. Here is my CSS

 td.details-control { background: url('img/details_open.png') no-repeat center center; cursor: pointer; } td.shown td.details-control { background: url('img/details_close.png') no-repeat center center; cursor: pointer; }

JQuery itself

  $(document).ready(function() { var table = $('#UsersTable').DataTable({ "iDisplayLength": 5, "language": { "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Russian.json" }, }); $('#UsersTable').on('click', 'td.details-control', function () { var td = $(this).closest('td'); var row = table.row(td); var id = $('#idrow').attr('data-assigned-id'); $.ajax({ url: '@Url.Action("Details", "Users")', type: 'post', data: { id: id }, dataType: "json", success: function (data) { if (row.child.isShown()) { row.child.hide(); td.removeClass('shown'); } else { // Open this row row.child(format({ 'ФИО': data.DisplayName, 'ФИО': data.DisplayName })).show(); td.addClass('shown'); } }, }); }); });

What am I doing wrong? And also, for some reason, here it is var id = $('#idrow').attr('data-assigned-id'); I get the wrong data. But this is probably the second question.

    2 answers 2

    Try to replace

     td.shown td.details-control { background: url('img/details_close.png') no-repeat center center; cursor: pointer; }

    on

     td.shown { background: url('img/details_close.png') no-repeat center center; cursor: pointer; }

    and

     $('#UsersTable').on('click', 'td.details-control', function () { var td = $(this).closest('td'); var row = table.row(td); var id = $('#idrow').attr('data-assigned-id'); $.ajax({ url: '@Url.Action("Details", "Users")', type: 'post', data: { id: id }, dataType: "json", success: function (data) { if (row.child.isShown()) { row.child.hide(); td.removeClass('shown'); } else { // Open this row row.child(format({ 'ФИО': data.DisplayName, 'ФИО': data.DisplayName })).show(); td.addClass('shown'); } }, }); });

    on

      $('#UsersTable').on('click', 'td.details-control', function () { $(this).toggleClass('shown'); var row = table.row(td); var id = $(this).attr('data-assigned-id'); $.ajax({ url: '@Url.Action("Details", "Users")', type: 'post', data: { id: id }, dataType: "json", success: function (data) { row.child(format({ 'ФИО': data.DisplayName, 'ФИО': data.DisplayName })).show(); }, }); });
    • Yes, thank you so much! It helped! - shatoidil
    • The button does not change ( - shatoidil
    • @shatoidil updated the answer - KYRAN
    • I changed the styles and it all worked. Changed script gives error Index: 2246 Uncaught ReferenceError: td is not defined - shatoidil
    • @shatoidil forgot to add var td = $(this).closest('td'); - KYRAN 4:05 pm
     $('#UsersTable').on('click', 'td.details-control', function () { var td = $(this); var row = table.row(this); var id = $(this).attr('data-assigned-id'); ...
    • Data is now transmitted correctly, but the button does not change when the list is opened. - shatoidil