отлаживать таблицу HTML из-за каждого вызова GET используя jQuery

у меня есть приложение MVC ASP.NET C#, что тратит Веб услугу Api путь jQuery, чтобы получать все реестры специфической таблицы и функционирует хорошо, моя единственная проблема: я нажимаю на кнопку, чтобы получать данные и он показывает их в таблице, но если я вновь нажимаю на кнопку, показывает мне снова данные, но вместе с ранее вернувшим, а именно, я показываю два раза те же данные в таблице и если я нажимаю третий раз показываю три раза данные.

это мой код javascript, $ (" #Table") .empty () я функционирует, чтобы не показывать два раза реестры, но удаляет мне заголовки колонн

$("#boton_de_pabletoreto").click(function () {

    $.ajax({
        type: "GET",
        url: "http://localhost:55987/api/Empleados",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //$("#Table").empty();
            $.each(data, function (i, item) {
                var rows = "<tr>" +
                    "<td id='id'>" + item.id + "</td>" +
                    "<td id='nombres'>" + item.Nombres + "</td>" +
                    "<td id='cargo'>" + item.Cargo + "</td>" +
                    "<td id='dpto'>" + item.Dpto + "</td>" +
                    "</tr>";
                $('#Table').append(rows);
            });
            console.log(data);
        },

        failure: function (data) {
            alert(data.responseText);
        },
        error: function (data) {
            alert(data.responseText);
        }

    });
});

и код HTML таблицы

 <table class="table table-bordered" id="Table">
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Departamento</th>
                <th>Cargo</th>
            </tr>
        </table>

они могут показывать меня, как показывание данных только однажды пожалуйста.

2
задан 10.01.2019, 08:58
4 ответа

В твоем html, в таблицу ты делишь ее на части в header и body. Так:

<table class="table table-bordered" id="Table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Departamento</th>
            <th>Cargo</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

И в success ajax, ты ссылаешься на tbody таблицы. Так:

$('#Table > tbody').empty();
$.each(data, function (i, item) {
    var rows = "<tr>" +
        "<td id='id'>" + item.id + "</td>" +
        "<td id='nombres'>" + item.Nombres + "</td>" +
        "<td id='cargo'>" + item.Cargo + "</td>" +
        "<td id='dpto'>" + item.Dpto + "</td>" +
        "</tr>";
    $('#Table > tbody').append(rows);
});
console.log(data);
1
ответ дан 20.11.2019, 01:29

0

, если ты не хочешь удалить заголовки, ты должен отделять их от контента таблицы с этикетками и as¦-:

$("#boton_de_pabletoreto").click(function () {

$.ajax({
    type: "GET",
    url: "http://localhost:55987/api/Empleados",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $("#Table > tbody").empty();//limpia solo los registros del body
        $.each(data, function (i, item) {
            var rows = "<tr>" +
                "<td id='id'>" + item.id + "</td>" +
                "<td id='nombres'>" + item.Nombres + "</td>" +
                "<td id='cargo'>" + item.Cargo + "</td>" +
                "<td id='dpto'>" + item.Dpto + "</td>" +
                "</tr>";
            $('#Table tbody').append(rows);
        });
        console.log(data);
    },

    failure: function (data) {
        alert(data.responseText);
    },
    error: function (data) {
        alert(data.responseText);
    }

});
});

и код HTML таблицы

<table class="table table-bordered" id="Table">
  <thead>
    <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Departamento</th>
        <th>Cargo</th>
    </tr>
  </thead>
  <tbody>
  <tbody>
</table>
1
ответ дан 20.11.2019, 01:29

Попытайся с $('#Table').remove(rows); перед тем, как вводить новости rows, не, если ты eliminarÃ: заголовки.

0
ответ дан 20.11.2019, 01:29
  • 1
    спасибо, но он ничего не показывает мне. –   10.01.2019, 09:10

То, что делает funci¦n append(), состоит в том, чтобы производить элемент и вводить это как último сын элемента, который ты использовал в селекторе. То, в чем tú ты нуждаешься, состоит в том, чтобы был разбит контент твоей таблицы.

ты Можешь использовать:

$('#Table').html(rows);

Вместо:

$('#Table').append(rows);

Таким образом таблица serÃ: наполненная контентом переменной rows разбивая то, что у таблицы было внутри раньше.

0
ответ дан 20.11.2019, 01:29
  • 1
    спасибо, но só это мне показывает ú ltimo я регистрирую. –   10.01.2019, 09:10
  • 2
    Потому что ты должен доставать $ (' #Table') .html (rows); blucle .each, если он ты не уходит в sobreescribir в каждом iteració n. –  phpMyGuel 10.01.2019, 09:35

Теги

Похожие вопросы