Question

我正在构建一个laravel应用程序，我希望在两秒钟后显示数据库中是否有任何更新数据。所以在这种情况下我给表了一个＆＃39; id＆＃39;然后我在一段时间间隔之后就把桌子放了一下。但问题是每次javascript调用后它都会在表中创建一个空行，即使该表也检索了该值。我该如何避免这个问题......有什么建议吗？

<div class="container">
            <h3> List Of Courses </h3></br>

            <table class="table table-striped table-bordered dataTable" id="example">
            <thead>
            <tr>
                <td>Serial No</td>
                <td>Title</td>
                <td>Description</td>                    
                <td>Action</td>
            </tr>
            </thead>
            <tbody>
            <?php $i=1; ?>
            @foreach($items as $row)

                <tr>
                    <td>{{$i}}</td>
                <td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>  
                <td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>  


                <td>    
                        <button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>                   
                </td>

                </tr>

            <?php $i++; ?>

            @endforeach
            </tbody>
        </table>
        </div>

这是我在3秒后用来加载表格的javascript：

<script type="text/javascript">
  setInterval(function() {
    $("#example").load("list #example");                                
  }, 30000);
</script>

Answer 1

您需要给load一个回调并检查您是否返回了任何数据。在不知道返回数据结构的情况下，我最好的猜测是

$("#example").load("list #example", function (data) {
    // hopefully you are returning json. if not, return json. It's the artisan way :D
    let parsed = JSON.parse(data);

    if (parsed) {
        // build html and inject in dom
    }
});

Answer 2

看到这是我实际解决问题的方法，

我将表放在一个新div中，然后在该div上调用了jquery .load（）。

像这样：

<div class="reloadTable">
   <table class="table table-striped table-bordered dataTable" id="example">

    // table data

   </table>
</div>

javaScript：

<script type="text/javascript">
  setInterval(function() {
    $(".reloadTable").load("list  #example");                               
  }, 3000); 
</script>

如何在javaScript调用后避免在表中创建新行？

2 个答案: