Paginação de resultados com Ajax, CodeIgniter e Bootstrap

Paginação de Resultados com Ajax, CodeIgniter e Bootstrap

Esse tutorial é uma extensão do tutorial anterior sobre paginação de resultados com CodeIgniter e Bootstrap. Caso não tenha visto o tutorial, então clique aqui para acessá-lo e em seguida volte para este, assim você terá uma base completa para o estudo sobre paginação de resultados com Ajax, CodeIgniter e Bootstrap.

Montando o ambiente

Faça o download do código-fonte do tutorial Paginação de resultados com CodeIgniter e Bootstrap, ele possui a estrutura inicial necessária para aplicar os conhecimentos adquiridos ao longo desse tutorial.

CLIQUE AQUI e faça o download.

Ajustando a view

Como já temos a estrutura pronta, vamos apenas ajustar a view que exibe a página inicial. Dentro desses ajustes adicionaremos um ID para a div que vai receber o conteúdo da página escolhida na navegação de páginas (paginação) e reposicionamos o bloco de navegação das páginas.

Veja o código abaixo:

Com a view ajustada, vamos criar uma outra view, que será a tabela com os dados da página a ser exibida a partir da requisição ajax feita ao clicar no item da navegação de páginas. Crie um arquivo em application/views chamado pagina-resultados.php.

Esse arquivo será muito semelhante ao arquivo home.php, porém, não conterá as chamadas para os cabeçalhos e rodapé, apenas para o conteúdo da tabela de dados e paginação.

Veja no código abaixo como ele ficará:

Agora que as views estão prontas, é hora de atualizar o controller, para que seja feita a exibição da view conforme o tipo de acesso. Caso o usuário tenha problemas com o javascript e a requisição ajax falhe, então deve haver o carregamento tradicional da página, e essa atualização do controller permitirá isso.

Ajustando o controller

Abra o arquivo application/controllers/Base.php. Vamos alterar o método index em 2 partes: configurações da paginação e exibição da view.

Configurações da paginação

Nas configurações da paginação vamos alterar a chave full_tag_open do array $config, adicionando para a tag ul que é passada como valor da chave um id.

Essa alteração é necessária pois precisamos ter um modo de identificar essa paginação de maneira única, para que o javascript possa fazer a leitura do DOM e encontrá-la, aplicando assim a rotina do evento click.

"full_tag_open" => "

<ul class='pagination' id='ajaxPagination'>",

Exibição da view

Atualmente exibimos a view utilizando o seguinte código:

$this->load->view('home',$data);

Mas dessa forma, não verificamos se a requisição de exibição está sendo feita via ajax, ou por uma chamada tradicional de página. Para checar se a requisição é ajax ou não, utilizaremos $this->input->is_ajax_request(), um método nativo do CodeIgniter.

Vamos combiná-lo com um IF para então exibir a view correta, com base no tipo de requisição. O código deverá ficar assim:

if (!$this->input->is_ajax_request()) {
    $this->load->view('home',$data);
}else{
    $this->load->view('pagina-resultados',$data);
}

Se não for uma requisição ajax, então retorna a view padrão (home.php), caso contrário retorna a view somente com a tabela de dados e a paginação (pagina-resultados.php).

Dessa forma, se você acessar via browser o projeto desse tutorial, verá que a paginação continua funcionando como antes; ao clicar na página a url é carregada.

Agora vamos criar o código javascript que irá fazer as requisições via ajax, eliminando o carregamento completo da página toda vez que o usuário clicar em um dos links da paginação.

A requisição ajax

Para a requisição ajax, crie um arquivo chamado scripts.js dentro de assets/js. Nesse arquivo teremos o código a ser executado quando o usuário clicar em um link da páginação, fazendo assim a requisição ajax.

Ao clicar no link, será recuperada e armazenada em uma variável a URL de destino dele. Em seguida será feita a requisição ajax, usando $.ajax, para assim solicitarmos ao controller Base a página a ser exibida, e é nesse momento que a verificação da requisição ajax será feita, onde $this->input->is_ajax_request() será checado.

O código deve ficar como abaixo:

Para que a paginação via ajax comece a funcionar será necessário adicionar o carregamento desse script à página. Para isso abra o arquivo application/views/commons/rodape.php e atualize-o conforme o código abaixo:

Agora sim a paginação de resultados está funcionando corretamente, através de requisições ajax.

Viu como é fácil? Em pouco tempo e com uma codificação bastante simples você implementou uma paginação funcional.

Tem dúvidas? Sugestões? Deixe nos comentários que responderei o masi breve possível.

Bons Estudos!
button-codigo-fonte