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 + 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 + 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.