результат ajax не отображается должным образом в таблице

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

Вы можете отображать свои данные без указания идентификаторов тегам 'td' в HTML

создайте 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);

если вы хотите присвоить Id каждому 'td', вы можете указать $ .each <td id="yourID'+i+'"> за каждый тд в теге body

Answer 2

Это связано с тем, что все ячейки в каждой строке имеют одинаковый идентификатор, поэтому вы обновляете первую строку 10 раз.

Элементы HTML не должны иметь повторяющихся идентификаторов .

Вы можете сделать это вместо этого в PHP:

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

Тогда в JavaScript:

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

Также нет необходимости в parseInt(i) - просто используйте i.