Question

我需要每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>

我从控制器正确地得到了结果。但是在表中显示时发生了一些事情。

Answer 1

这是因为每一行中的单元格都具有相同的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。

Answer 2

您可以显示数据而无需在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函数中编写以下代码以将行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，则可以输入$ .each 身体标签中的每td <td id="yourID'+i+'">

表中的ajax结果未正确显示

2 个答案: