使用Codeigniter和Ajax从数据库加载更多数据

Question

我需要关于从数据库加载更多数据的按钮的帮助。我找到了一些例子，但太糟糕了。以下是我迄今为止：

阿贾克斯：

$('#revendas_conteudo .btn_carregar_mais').on('click', function(e) { 
    $.ajax({ 
     url: '/auto/carros/load_more', 
     data: { 
      offset: $('#offset').val(), 
      limit: $('#limit').val() 
     }, 
     success: function(data) { 
      $('#revendas_conteudo .lista_estoque').append(data); 
     } 
    }); 
}); 

我的控制器方法调用模型load_more：

public function load_more() 
{ 
    $offset = $this->input->get('offset'); 
    $limit = $this->input->get('limit'); 

    $data['res'] = $this->Pesquisas_model->load_more($offset, $limit); 
    $data['offset'] = $offset + 1; 
    $data['limit'] = $limit + 1; 

    echo json_encode($data); 
} 

Pesquisas_model::load_more()：

public function load_more($offset, $limit) 
{ 
    $this->db 
     ->select(
      'usuario.nome_razao_social AS nome_anunciante,' . 
      'modelo.modelo AS modelo,' . 
      'marca.marca AS marca,' . 
      'ano_modelo.ano AS ano,' . 
      'ano_modelo.valor AS valor,' . 
      'ano_modelo.combustivel AS combustivel,' . 
      'cambio.descricao_cambio AS descricao_cambio,' . 
      'estado.uf AS uf,' . 
      'cidade.nome_cidade AS nome_cidade,' . 
      'carro.*' 
     ) 
     ->join('usuario', 'usuario.id = carro.id_usuario') 
     ->join('ano_modelo', 'ano_modelo.id = carro.id_ano_modelo') 
     ->join('modelo', 'modelo.id = ano_modelo.id_modelo') 
     ->join('marca', 'marca.id_marca = modelo.id_marca') 
     ->join('cambio', 'cambio.id = carro.id_cambio') 
     ->join('estado', 'estado.id = carro.id_estado') 
     ->join('cidade', 'cidade.id = carro.id_cidade') 
     ->order_by('marca.marca', 'ASC') 
     ->limit($offset, $limit); 

    $query = $this->db->get($this->table); 

    if ($query) { 
     $data = array(); 

     foreach ($query->result_array() as $row) { 
      $data[] = $row; 
     } 

     $query->free_result(); 

     return $data; 
    } 
} 

的HTML：

<div class="lista_estoque"> 
    <?php foreach ($pesquisas as $p) { ?> 
     <div class="item_estoque"> 
      <div class="avatar"> 
       <img src="/uploads/carros/destaque/<?php echo $p['imagem_destaque']; ?>"/> 
      </div> 
      <div class="texto_anuncio"> 
       <h4><?php echo $p['modelo']; ?></h4> 

       <div class="detalhes"> 
        <span><?php echo $p['marca'] . ' | ' . $p['combustivel'] . ' | ' . $p['cor']; ?></span> 
        <span><?php echo $p['ano']; ?></span> 
        <span><?php echo number_format($p['kilometragem'], 2) . 'km'; ?></span> 
       </div> 

       <span class="anunciante"><?php echo $p['nome_anunciante']; ?></span> 
      </div> 
      <div class="texto_anuncio_right"> 
       <span class="preco"><?php echo 'R$ ' . $p['preco']; ?></span> 
       <a href="/comprar/detalhes/<?php echo $p['id'] ?>" class="bt_vejamais">Veja Mais</a> 
      </div> 
     </div> 
    <?php } ?> 
    <div class="carregar_mais"> 
     <input type="hidden" name="limit" id="limit" value="1"/> 
     <input type="hidden" name="offset" id="offset" value="1"/> 
     <button class="btn btn_carregar_mais" data-val="0">Mostrar mais resultados</button> 
    </div> 

到目前为止，会发生什么是JSON代码被追加到div的末尾。我该如何将这些数据转换为HTML及其类？

Answer 1

一个JSON文本转换成Java

var text = '{ "employees" : [' + 
'{ "firstName":"John" , "lastName":"Doe" },' + 
'{ "firstName":"Anna" , "lastName":"Smith" },' + 
'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; 

var obj = JSON.parse(text); 

使用JS对象

<p id="demo"></p> 

<script> 
document.getElementById("demo").innerHTML = 
obj.employees[1].firstName + " " + obj.employees[1].lastName; 
</script> 

Answer 2

在控制器中执行以下功能，你需要添加，你的HTML正确呼应内容的图您定义的标记和类。 目前，您正在回应json_encode格式。这就是它按原样打印的原因。

public function load_more() 
{ 
    $offset = $this->input->get('offset'); 
    $limit = $this->input->get('limit'); 

    $data['res'] = $this->Pesquisas_model->load_more($offset, $limit); 
    $data['offset'] = $offset + 1; 
    $data['limit'] = $limit + 1; 

    //echo json_encode($data); 
$this->load->view('load-more',$data['res']); 
} 

Answer 3

创建一个名为load_more.php在视图文件夹视图.. 你控制器会是这样

public function load_more() 
    { 
     $offset = $this->input->get('offset'); 
     $limit = $this->input->get('limit'); 

     $data['pesquisas '] = $this->Pesquisas_model->load_more($offset, $limit); 
     $data['offset'] = $offset + 1; 
     $data['limit'] = $limit + 1; 

     data['load_more']=$this->load->view('load_more',$data); 
    } 

而且在您看来load_more。 php

<?php foreach ($pesquisas as $p) { ?> 
     <div class="item_estoque"> 
      <div class="avatar"> 
       <img src="/uploads/carros/destaque/<?php echo $p['imagem_destaque']; ?>"/> 
      </div> 
      <div class="texto_anuncio"> 
       <h4><?php echo $p['modelo']; ?></h4> 

       <div class="detalhes"> 
        <span><?php echo $p['marca'] . ' | ' . $p['combustivel'] . ' | ' . $p['cor']; ?></span> 
        <span><?php echo $p['ano']; ?></span> 
        <span><?php echo number_format($p['kilometragem'], 2) . 'km'; ?></span> 
       </div> 

       <span class="anunciante"><?php echo $p['nome_anunciante']; ?></span> 
      </div> 
      <div class="texto_anuncio_right"> 
       <span class="preco"><?php echo 'R$ ' . $p['preco']; ?></span> 
       <a href="/comprar/detalhes/<?php echo $p['id'] ?>" class="bt_vejamais">Veja Mais</a> 
      </div> 
     </div> 
    <?php } ?> 

jQuery的

 success: function(data) { 
         var res= JSON.parse(data); 
        $('#revendas_conteudo .lista_estoque').append(data.load_more); 
    $('.carregar_mais input[name=limit]').val(data.limit); 
    $('.carregar_mais input[name=offset]').val(data.offset); 

}); 

Answer 4

这里的大多数答案都使我的解决方案。可悲的是，我无法将所有这些标记为正确答案，所以请允许我发布我所做的：

首先，这是完整的Ajax。我不能使它与外部文件工作的建议，所以它是这样的：

$('#revendas_conteudo .btn_carregar_mais').on('click', function(e) { 
    $.ajax({ 
     url: '/auto/carros/load_more', 
     data: { 
      'offset': $('#offset').val(), 
      'limit': $('#limit').val() 
     }, 
     success: function(data) { 
      var obj = JSON.parse(data); 
      var i = 0; 
      var max = obj.total === obj.offset; 

      $('#limit').val(obj.limit); 
      $('#offset').val(obj.offset); 

      $.each(obj, function(k, v) { 
       $('#revendas_conteudo .load_more').append(
        '<div class="item_estoque">' + 
         '<div class="avatar">' + 
          '<img src="/uploads/carros/destaque/' + obj.res[i].imagem_destaque + '"/>' + 
         '</div>' + 
         '<div class="texto_anuncio">' + 
          '<h4>' + obj.res[i].modelo + '</h4>' + 

          '<div class="detalhes">' + 
           '<span>' + obj.res[i].marca + ' | ' + obj.res[i].combustivel + ' | ' + obj.res[i].cor + '</span>' + 
           '<span>' + obj.res[i].ano + '</span>' + 
           '<span>' + obj.res[i].kilometragem + ' km</span>' + 
          '</div>' + 

          '<span class="anunciante">' + obj.res[i].nome_anunciante + '</span>' + 
         '</div>' + 
         '<div class="texto_anuncio_right">' + 
          '<span class="preco"> R$ ' + obj.res[i].preco + '</span>' + 
          '<a href="/comprar/detalhes/' + obj.res[i].id + '" class="bt_vejamais">Veja Mais</a>' + 
         '</div>' + 
        '</div>' 
       ).show('slow'); 

       i++; 

       if (max) { 
        $('#revendas_conteudo .btn_carregar_mais').css({backgroundColor: '#999'}).html('Sem mais resultados').attr('disabled', true); 
       } 
      }); 
     } 
    }); 
}); 

在这里我每一个新的结果追加到div.load_more，如果total等同于当前offset，这意味着它已经显示了所有的值，使button不可用于点击。

这里，控制器方法：

public function load_more() 
{ 
    $offset = $this->input->get('offset'); 
    $limit = $this->input->get('limit'); 

    $data['res'] = $this->Pesquisas_model->load_more($offset, $limit); 
    $data['total'] = $this->Pesquisas_model->count_all(); 

    if ($data['res']) { 
     $data['offset'] = $offset + 2; 
     $data['limit'] = $limit; 

     echo json_encode($data); 
    } 
}