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 do banco de dados 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.
No caso o NIF
, seria o campo nif
no banco de dados.
Para sabermos qual foi o valor do NIF
digitado na busca do DataTables
, faríamos algo assim:
$params = $_GET;
$nif = $params['search']['value'];
E depois na cláusula WHERE
do SQL
farias algo assim:
WHERE nif LIKE '%$nif%'
O que iria retornar apenas colunas com o NIF
correspondente à busca.
Exemplo 2:
Reescrevendo a função para algo assim:
$(document).ready(function() {
$('#tabela').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "Data.php",
"data": function ( d ) {
d.myKey = "myValue";
// d.custom = $('#myInput').val();
// etc
}
}
});
} );
No ficheiro Data.php
, se tentares retornar o valor de $_GET['mykey']
, ou se definires o valor da parte comentada d.custom = $('#myInput').val();
, e tentares retornar o valor no PHP
usando $_GET['custom']
, terás o valor do input
com id="myinput"
, ou myValue
para o caso do $_GET['mykey']
.
São estas as únicas maneiras de passar dados usando o DataTable
.
Sendo que podes inverter o processo, priorizando antes a leitura dos campo input
, e só depois ativar o DataTable
através de um CallBack
. Se isto não te puder ajudar amigo, não sei o que mais pode.
Dica:
Podes ler quais parâmetros foram enviados pelo DataTables
ativando o Console Web > Rede
e fazer um refresh
na página.
No caso do parâmetro personalizado que defini ali em cima d.mykey
foi-me apresentado algo assim:
http://
127.0.0.1/
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
&myKey=myValue // Aqui, este campo dantes não existia.
&_=1441908981287
Separei os parâmetros para melhor leitura.
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.
JSON
deve ser algo parecido com isto{ "data": [ {"NOME" : "Primeiro Nome", "MORDA": "Primeira Morada", "LOCALIDADE": "Primeira Localidade"} ] }
, ou seja, deves colocar o prefixodata
no teu conjunto de valores. Assim:echo "{ \"data\":".json_encode($rows). "}"
. Experimenta isto e diz o que retornou.plugin
faz tudo internamente, oexemplo
mais objetivo que consegui encontrar no diretório deles foi este aqui, porém não está a funcionar, no caso teria de se reescrever oscript
todo numa remota possibilidade de conseguir coloca-lo em funcionamento.