Загрузите больше данных из базы данных с помощью Codeigniter и Ajax

Мне нужна помощь с кнопкой для загрузки большего количества данных из базы данных. Я нашел примеры, но слишком плохие. Вот что я имею до сих пор:

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) { $('#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 и его классы?

преобразование 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>

создайте представление с именем 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); });

В следующей функции в контроллере вам нужно добавить представление, в котором вы правильно эхо-контент с помощью 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']); }

Как работает приложение ajax

Большинство ответов здесь привели меня к решению. К сожалению, я не могу отметить всех их как правильный ответ, поэтому позвольте мне опубликовать то, что я сделал:

Во-первых, это полный 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); } }