重新加载 table Ajax jquery

Question

我正在开发一个 table，table 使用 ajax/jquery 重新加载，但 table 不为空，将下一个内容附加到 table。

<table class="table" id="pujas">
    <thead>
        <tr>
            <th>#</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Jquery

<script>
 $(document).ready(
            function() {
                setInterval(function() {                  
                $.ajax({
                url:'../ajaxpujas',
                 dataType:'json',
                type:'get',
                cache:true,
                success:json,

               });

               function json(data){
                   $(data).each(function(index,value)  {
                        console.log(value);
                        var table = '<tr><td>' + value.id + '</td><td>' + value.id_user + '</td><td>' + value.importe + '</td></tr>';
                        $('#pujas').append( table );
                        });
                        }
                }, 1000);
            });
</script>

对此有什么想法吗？我怎样才能正确地进行刷新 table？

Answer 1

您正在使用追加而不是追加元素。您可以通过使用 '.html()' 并将 HTML 添加到当前 HTML.[=10 来从 var table 添加 HTML =]

另一种方法是实际创建元素，然后使用 .append

Answer 2

在使用新内容重新加载之前，您必须清理 <table> 内容。

但是，在这种情况下，您应该从 <tbody> 元素中添加和管理 table 内容，以保留上面的 <thead>。

因此，在您的 json 函数中，您可以执行以下操作：

$('#tbody_id').html (""); // This cleans the previous content.

然后添加您的新内容：

$('#tbody_id').append ('Your html content');

Answer 3

尝试：

添加 tbody id

 <tbody id='tbodyid'>

并在追加之前清除

$("#tbodyid").empty();

在你的代码中

  function json(data){
                   $("#tbodyid").empty();
                   $(data).each(function(index,value)  {
                   ...

重新加载 table Ajax jquery

Reload table Ajax jquery

ajax

jquery

tabs