ajax结果在表中没有正确显示

Posted 2021-04-03

我需要每隔5秒刷新一次表中的内容。我用ajax和setInterval函数做到了这一点。但结果未正确显示。

这是结果显示。这里第一行被最后一行替换。我找不到原因。

这是我的代码。

我的控制器

public function latestReport() {
    $data['incomingCount'] = $this->Home_model->findCount('incoming');
    $data['outgoingCount'] = $this->Home_model->findCount('outgoing');
    $data['droppedCount'] = $this->Home_model->findCount('drop');
    $data['latestReport'] = $this->Home_model->latestReport(10);
    print_r(json_encode($data));
}

脚本

function latestReport() {
        $.ajax({
            url : base_url + 'Home/latestReport',
            type : 'POST',
            success:function(data) {
                var res = $.parseJSON(data);
                $('#incomingCount').text(res.incomingCount);
                $('#outgoingCount').text(res.outgoingCount);
                $('#droppedCount').text(res.droppedCount);
                var latestCount = res.latestReport.length;
                for(var i = 0; i < latestCount; i++){
                    var count = parseInt(i) + 1;

                    $('#resNo').text(count);
                    $('#resSource').text(res.latestReport[i]['Source']);
                    $('#resDest').text(res.latestReport[i]['Destination']);
                    $('#resCallerID').text(res.latestReport[i]['CallerID']);
                    $('#CallerTime').text(res.latestReport[i]['CallStartTime']);
                    $('#resStatus').text(res.latestReport[i]['Status']);
                    $('#resAgent').text(res.latestReport[i]['Agent']);
                    $('#resType').text(res.latestReport[i]['Type']);
                }

            }
        });
    }

    var myVar = setInterval(latestReport, 5000);

html

<table class="normal-table" id="senderidList">
   <tr>
     <th style="width: 100px">Sl No</th>                                           
     <th style="width: 100px">Source</th>
     <th>Destination</th>
     <th>CallerID</th>
     <th style="width: 150px">Call Start Time</th>
     <th>Status</th>
     <th>Agent</th>
     <th>Type</th>                                    
   </tr>
   <?php if( isset($latestReport) && !empty($latestReport)) {
       $i = 1;
       foreach($latestReport as $report) {
   ?>
   <tr>
     <td id="resNo"><?php echo $i++;?></td>
     <td id="resSource"><?php echo $report['Source']?></td>
     <td id="resDest"><?php echo $report['Destination']; ?></td>
     <td id="resCallerID"><?php echo $report['CallerID']?></td>
     <td id="CallerTime"><?php echo date('d-m-Y h:i:s A', strtotime($report['CallStartTime'])); ?></td>
     <td id="resStatus"><?php echo $report['Status']?> </td>
     <td id="resAgent"><?php echo $report['Agent']?> </td>
     <td id="resType"><?php echo $report['Type']?> </td>
  </tr>
  <?php } }
  else {?>  
  <tr><td colspan="4"> No details available</td></tr>
  <?php } ?>
</table>

我正确地从控制器获得结果。但是在桌子上展示时发生了一些事

答案

这是因为每行中的单元格都具有相同的ID，因此您要将第一行更新10次。

HTML elements should not have duplicate IDs。

您可以在PHP中执行此操作：

<tr id="row-<?php echo $i; ?>">
    <td class="resNo"><?php echo $i++;?></td>
    ...

然后在javascript中：

$('#row-' + count + ' .resNo').text(count);
...

此外，没有必要parseInt(i) - 只需使用i。

另一答案

您可以显示数据，而无需在HTML中为“td”标记提供ID

让你的HTML如下

<table class="normal-table" id="senderidList">
   <thead>
   <tr>
     <th style="width: 100px">Sl No</th>                                           
     <th style="width: 100px">Source</th>
     <th>Destination</th>
     <th>CallerID</th>
     <th style="width: 150px">Call Start Time</th>
     <th>Status</th>
     <th>Agent</th>
     <th>Type</th>                                    
   </tr>
   </thead>
  <tbody> 

  </tbody>   
</table>

在您的ajax函数的Success中写下以下代码，用于将第1行附加1

$('#senderidList tbody').empty();//clear your data
                var TableBody = '';
                if (data.d.length > 0) {
//following $.each loop will Concate data one by one 
                    $.each(data.d, function (i, latestReport) {
                        TableBody += '<tr><td>' + i + 1 + '<td><td>' + latestReport['Source'] + '<td><td>' + latestReport['Destination'] + '<td><td>' + latestReport['CallerID'] + '<td><td>' + latestReport['CallStartTime'] + '<td><td>' + latestReport['Status'] + '<td><td>' + latestReport['Agent'] + '<td><td>' + latestReport['Type'] + '<td></tr>';
                    });                    
                }
                else
                {
                    TableBody = '<tr><td colspan="4"> No details available</td></tr>';
                }
//append the created html to the table body using append function
                $('#senderidList tbody').append(TableBody);

如果你想给每个'td'提供Id，那么你可以为body标签中的每个td提供$ .each <td id="yourID'+i+'">