Bower, DataTables e CodeIgniter

Integrando Bower, DataTables e CodeIgniter – Parte 2

Na primeira parte desse tutorial vimos como implementar o Datatables usando dados estáticos, e agora vamos ver como utilizá-lo com dados dinâmicos, vindos do banco de dados.

Se você não leu a primeira parte do tutorial, tudo bem, CLIQUE AQUI e leia na íntegra antes de continuar.

Para iniciarmos o desenvolvimento dessa segunda parte, certifique-se de que tenha executado a primeira, pois vamos trabalhar com o código dela.

Criando o banco de dados

O primeiro passo é criar o banco de dados, já que vamos alimentar o Datatables de maneira dinâmica.

A seguir está a instrução SQL que deverá ser utilizada para criação da tabela clientes e também alguns inserts para popular a tabela.

Após criar o banco de dados, lembre-se de configurar a conexão no arquivo application/config/database.php e de ativar o carregamento da biblioteca de banco de dados no arquivo application/config/autoload.php.

Criando o model para provisão dos dados

O model para provisão dos dados será bem simples. Crie um arquivo chamado Clientes_model no diretório application/models conforme o código a seguir.

Esse código vai retornar um array com todos os registros da tabela clientes, sem nenhum tipo de filtro ou ordenação.

<?php 

defined('BASEPATH') OR exit('No direct script access allowed'); 

class Clientes_model extends CI_Model {

    public function GetClientes(){ 
        return $this->db->get('clientes')->result_array();
    }
}

Criando um novo método no controlador

Para que seja possível visualizar as diferenças na integração estática e dinâmica dos dados com o Datatables vamos criar um novo método no controlador Welcome, que irá prover os dados dinâmicos para o Datatables.

Adicione o método a seguir no seu controller Welcome, logo após o método Datatable.

/**
* Método para gerar os dados para o DataTable diretamente do banco de dados
*
* @return json
*/
public function DatatableDinamico(){

    $this->load->model('Clientes_model');
    $clientes = $this->Clientes_model->GetClientes();
    $dados['data'] = $clientes;
    echo json_encode($dados);

}

Atualizando a rota para obtenção dos dados

Abra o arquivo application/config/routes.php e atualize a rota utilizada pelo Datatables para obtenção dos dados. Veja no código a seguir como ela deverá ficar:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

//Rota criada para obtenção dos dados que irão alimentar o DataTable
//rota utilizada na primeira parte desse tutorial
//$route['get_datatable_data'] = 'Welcome/Datatable'; 
$route['get_datatable_data'] = 'Welcome/DatatableDinamico'; 

Atualizando a view para obter os dados dinamicamente

Para exibir os dados dinâmicos na view vamos precisar fazer algumas alterações tanto na estrutura das colunas do Datatables quanto no código JavaScript que processa o Datatables.

As mudanças efetuadas foram:

  • alteração na estrutura de colunas, deixando compatível com os novos dados
  • atualização do código JavaScript para melhor gerenciamento das colunas de dados no Datatables

A seguir está o código completo da view, com as devidas alterações.

Viu como é simples implementar um Datatables com dados dinâmicos usando o CodeIgniter?

A partir desse exemplo você poderá criar tabelas com os mais diversos tipos de dados, incluindo até botões de ação, como por exemplo “excluir”, “editar” entre outros.

Se tiver dúvidas, deixe-as nos comentários para que possamos te ajudar.

Até a pŕoxima!