代码之家 › 专栏 › 技术社区 › geeth

ajax结果未在表中正确显示

codeigniter ajax html jquery php

1

geeth · 技术社区 · 8 年前

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>

我从控制员那里得到了正确的结果。但在桌子上展示的时候发生了一些事情。

2 回复 | 直到 8 年前

1

We Are All Monica 8 年前

HTML elements should not have duplicate IDs .

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

然后在JavaScript中:

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

parseInt(i) -只是使用 i .

2

0

Som 8 年前

使你的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="yourID'+i+'">