Skip to main content
1 de 3
Edilson
  • 5,4mil
  • 2
  • 20
  • 42

Este exemplo aqui utiliza a caixa de busca do próprio DataTable para realizar buscas no banco de dados.

#HTML - Cliente

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DataTables - Exemplo com MySQLi &plus; PHP</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
    </head>
    <body>
        <div id="">
            <h1 style="text-align:center; font-family: Arial; font-weight:300;">DataTables - Exemplo com MySQLi &plus; PHP </h1>
            <section>
                <table id="tabela" class="display" cellspacing="0" with="90%">
                    <thead>
                        <tr>
                            <td>Jogo</td>
                            <td>Console</td>
                            <td>Preço</td>
                        </tr>
                    </thead>
                    
                    <tfoot>
                        <tr>
                            <td>Jogo</td>
                            <td>Console</td>
                            <td>Preço</td>
                        </tr>
                    </tfoot>
                </table>    
                <script type="text/javascript">
                    
                    $(document).ready(function() {
                        $('#tabela').DataTable({
                            "processing": true,
                            "serverSide": true,
                            "ajax": "Data.php"
                        });
                    } );
                    
                </script>
            </section>
        </div>
    </body>
</html>

Agora, segue o script PHP que retorna os valores do banco de dados no formato JSON.

#PHP - Servidor

<?php
// Criado por Parvez; Ou seja qual for o nome real dele
// Exemplo tirado orignalmente de: http://phpflow.com/php/datatable-pagination-sorting-and-search-server-side-phpmysql-using-ajax/
// Modificado por mim

//Conexao
// - example é o nome da tabela que usei
$db = mysqli_connect("localhost", "root", "", "example");
if(mysqli_connect_errno()){
    die("Erro:".mysqli_connect_error()."(.". mysqli_connect_errno() .".)"); 
}
//var_dump($db);
//------------------------

//Variaveis Compostas
$params = $colunas = $totalConsultas = $dados = array();
//Variaveis Simples
$where = $sql_total = $sql = "";
//Variaveis HTTP
$params = $_GET;
//Indexes
$colunas = array(0 => 'nome', 1 => 'console', 2 => 'preco');

//Valor de  Busca existe ?
if(!empty($params['search']) && $params['search']['value'] !== ""){
    $where = "WHERE ";
$where .= "( nome LIKE '%{$params['search']['value']}%' ";
    $where .= "OR console LIKE '%{$params['search']['value']}%' )"; 
}

//Total de Resultados Sem Valor de Busca
$SQL = "SELECT nome, console, preco FROM jogos ";
$sql_total .= $SQL;
$sql .= $SQL;

//Concatenar termo de busca se o valor existir
if(isset($where) && $where !== ""){
    $sql_total .= $where;
    $sql .= $where; 
}

//Ordenar e definir os LIMITES/OFFSETS
$sql .= "ORDER BY {$colunas[$params['order'][0]['column']]} {$params['order'][0]['dir']} LIMIT {$params['start']}, {$params['length']}";

//Obter o numero geral de consulta existentes para calcular o numero de páginas
$query_total = mysqli_query($db, $sql_total) or die("Erro: Não foi possivel contar os resultados - ". mysqli_connect_error());
$totalConsultas = mysqli_num_rows($query_total);

//Obter o conjunto de consultas existentes
$query_sql = mysqli_query($db, $sql) or die("Erro: Nenhum resultado encontrado - ". mysqli_connect_error());
while($row = mysqli_fetch_row($query_sql)){
    $dados[] = $row;    
}

$formato_json = array(
        "draw"           => intval($params["draw"]), 
        "recordsTotal"   => intval($totalConsultas), 
        "recordsFiltered"=> intval($totalConsultas), 
        "data"           => $dados);

echo json_encode($formato_json);

?>

#Tabela SQL

--
-- Estrutura da tabela `jogos`
--

CREATE TABLE IF NOT EXISTS `jogos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(36) NOT NULL,
  `console` varchar(16) NOT NULL,
  `preco` decimal(6,2) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `nome` (`nome`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Extraindo dados da tabela `jogos`
--

INSERT INTO `jogos` (`id`, `nome`, `console`, `preco`) VALUES
(1, 'Resident Evil - Retaliacao', 'XBOX 360', '3000.00'),
(2, 'The Elders Scrolls - Skyrim', 'XBOX 360', '5000.00');

#Detalhes:

O DataTables trata da requisição no lado do servidor, enviando parâmetros pela url ($_GET, $_REQUEST).

Isto é um exemplo, de quando abres o ficheiro index.html que contém a código jQuery que cria o DataTables:

http://localhost/projects/Data.php?draw=1&columns[0][data]=0&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=1&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=2&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][search][value]=&columns[2][search][regex]=false&order[0][column]=0&order[0][dir]=asc&start=0&length=10&search[value]=&search[regex]=false&_=1441820166780

O que acontece, é que o plugin DataTables envia logo estes parâmetros ao script/endereço no campo url da chamada Ajax, e sempre que é digitado um valor na caixa de busca, ou quando existem mais de 10 resultados e o usuário clica para ir à próxima página, é feita uma nova requisição e os valores retornados pelo script selecionado é modificado consonante a requisição feita.

Existe um exemplo original do DataTables, porém a requisição é bem mais complexa, daí eu ter procurado este exemplo. Espero que isto te ajude, porque a mim também ajudou, conheci este plugin dum jeito que nem esperava, mas vê-se que é bom partido.

Edilson
  • 5,4mil
  • 2
  • 20
  • 42