DataTables: Busca, filtragem, paginação e estilização de tabelas

 

Já pensou adicionar paginação, busca, filtragem, ordenação e ainda estilização em tabelas HTML com apenas algumas linhas de código? Graças ao DataTables isso é rápido e fácil.

Tudo o que você precisa fazer é acessar o site do plugin e copiar as informações presentes na página inicial.

  1. Adicionar o jQuery na sua página.
  2. Adicionar o link pro css do datatables.
  3. Adicionar o link pro javascript.
  4. Referenciar a tabela através do atributo ID.
  5. Adicionar o código de tradução para PT-BR.

Pronto! O código HTML abaixo exemplifica os passos acima:

<!DOCTYPE html>
	<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <title>Sua Página</title>
	

	  <link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">
	

	</head>
	<body>
	  
	  <table id="minhaTabela">
	    <thead>
	      <tr>
	        <th>Nome</th>
	        <th>E-mail</th>
	        <th>Telefone</th>
	        <th>Ação</th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr>
	        <td>Vinicius Moura</td>
	        <td>viniciusmouramail@gmail.com</td>
	        <td>49 12345-68791</td>
	        <td><a href="">Deletar</a></td>
	      </tr>
	      <tr>
	        <td>José Andrade</td>
	        <td>joseandrade@gmail.com</td>
	        <td>32 9875-68791</td>
	        <td><a href="">Deletar</a></td>
	      </tr>
	      <tr>
	        <td>Rodrigo Costa</td>
	        <td>rodrigocosta@gmail.com</td>
	        <td>32 4564-68791</td>
	        <td><a href="">Deletar</a></td>
	      </tr>
	    </tbody>
	  </table>
	  
	  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	  <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
	

	  <script>
	  $(document).ready(function(){
	      $('#minhaTabela').DataTable({
	        	"language": {
	                "lengthMenu": "Mostrando _MENU_ registros por página",
	                "zeroRecords": "Nada encontrado",
	                "info": "Mostrando página _PAGE_ de _PAGES_",
	                "infoEmpty": "Nenhum registro disponível",
	                "infoFiltered": "(filtrado de _MAX_ registros no total)"
	            }
	        });
	  });
	  </script>
	  
	</body>
	</html>
 

antes que alguém mencione esses números são ficticios.


arquivos ta no github .

segue no linkedin .

 

faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

exemplo do uso da biblioteca do phpspreadsheet para realizar a exportação

exemplo do uso da biblioteca do phpspreadsheet para realizar a exportação de dados do mysql  para o arquivo xlsx do excel via php.  

meu linkedin , segue lá.

arquivo no github

 <?php

// conexão do BD
include'con.php';
// caminho da biblioteca PHPSPREADSHEET
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\IOFactory;
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
use PhpOffice\PhpSpreadsheet\Writer\Xls;
// criação da planilha
$spreadsheet = new Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();
// edição do titulo da planilha
$sheet->setTitle("teste");

// realização do query para requerimento dos dados
                   
                        $query = "SELECT * FROM `atendimento` ";
                        
                   
// consulta
$sql = $conn->query($query);
$i = 1;

// inserindo as informações na planilha , conforme cada celula indicada.
                  while($exibe = $sql->fetch(PDO::FETCH_ASSOC)){
                    $sheet->setCellValue('A'.$i, $exibe['id']);
                    $sheet->setCellValue('B'.$i, $exibe['protocolo']);
                    $sheet->setCellValue('C'.$i, $exibe['registrado']);
                    $sheet->setCellValue('D'.$i, $exibe['cliente']);
                    $sheet->setCellValue('E'.$i, $exibe['competencia']);
                    $sheet->setCellValue('F'.$i, $exibe['datahora']);
                    $sheet->setCellValue('G'.$i, $exibe['pago']);
                    $i++;

                    }



header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="teste.xlsx"');
header('Cache-Control: max-age=0');
header('Cache-Control: max-age=1');
header('Cache-Control: cache, must-revalidate');
header('Pragma: public');

$writer = IOFactory::createWriter($spreadsheet, 'Xlsx');
$writer->save('php://output');



 
 
$conn = null;

?>

faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

EXCEL PHP - Biblioteca PhpSpreadsheet

 

Bibliotecas PHP: PhpSpreadsheet


otima biblioteca quando precisei importar e extrair dados de planilhas do Excel e usar no PHP.


vou resumir algumas partes mas quem tiver dúvidas e eu puder ajudar me chama no Linkedin.


Crie uma nova pasta para o seu projeto com um index.php.


Após isso navegue até a pasta do seu projeto no prompt de comando (cmd) com:

no meu caso : *


 cd public_html/PhpExcel/


Resumindo do composer em diante ...


Acesse o site da biblioteca PhpSpreadSheet e faça a instalação através do seu prompt de comando (cmd) com:


 composer require phpoffice/phpspreadsheet


A estrutura do nosso projeto se encontra da seguinte maneira:


PhpExcel

 - vendor

 - composer.json

 - composer.lock

 - index.php

 - processa.php


 Após a instalação ser concluída abra o seu index.php e chame pelo autoload.php que está dentro da pasta vendor.


 * require('vendor/autoload.php');


 Configurando a biblioteca - Dentro de index.php dê um “use” para dizer que vai usar as classes:


*

//carrega inicialmente a biblioteca
require '../vendor/autoload.php';
//recebe o arquivo via $_FILE
$dados = $_FILES['arquivo'];
// caminho do arquivo para a biblioteca visualizar
$route = $dados['tmp_name'];

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

// aqui carrega o arquivo pela biblioteca
$spreadsheet = \PhpOffice\PhpSpreadsheet\IOFactory::load($route);
// carrega a planilha ativa - veja na documentação getActiveSheet e getSheets
$worksheet = $spreadsheet->getActiveSheet();
// aqui vai contar quantas linhas com dados
$highestRow = $worksheet->getHighestRow();
// aqui ate qual coluna tem dados em letras (A , B , C , D , E , F)
$highestColumn = $worksheet->getHighestColumn();
// Exibindo dados aqui 
$i = 1; echo $highestRow." - ".$highestColumn." - ";
echo $worksheet->getCell('A'.$i);
echo "</br>";
echo $worksheet->getCell('B1');
echo "</br>";
echo $worksheet->getCell('C1');
echo "</br>";
echo $worksheet->getCell('D1');
echo "</br>";
echo $worksheet->getCell('E1');
echo "</br>";
echo $worksheet->getCell('F1');
echo "</br>";
echo $worksheet->getCell('G1');
echo "</br>";
echo $worksheet->getCell('A2');
echo "</br></br>";
var_dump($dados);
echo "1</br></br>";



tem um exemplo no meu github aqui.

se alguém quiser melhorar lá fique a vontade.

faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

Desafios Intermediários em JavaScript - Quanta Mandioca?

 

Desafio

Os meses de Junho e Julho são tradicionalmente conhecidos por todo Brasil por suas festas típicas, e para o grupo de amigos da Marlene não é diferente, toda segunda quinzena do mês de Julho ela e seus amigos se reunem para tradicional mandiocada! Na festiva sempre se reúnem na casa da Marlene, o Chico, o Beto, o Bernardo, a Marina e a Iara. E como não poderia ser diferente o prato principal dessa reunião é a mandioca. Cada um deles come de uma a dez porções de mandioca e eles sempre avisam a Marlene com antecedência a respeito de quantas porções irão comer nesse dia. O tamanho da porção de cada um é diferente, mas sempre são os mesmos. As porções são as seguintes (em gramas):

  • O Chico come 300

  • O Bento come 1500

  • O Bernardo come 600

  • A Marina 1000

  • A Iara come 150

Marlene por sua vez sempre come 225 gramas de mandioca. Cansada de todo ano ter que calcular quanta mandioca preparar ela te desafiou para escrever um programa que informe quanta mandioca deve ser preparada em gramas.

Entrada

A entrada consiste de 5 inteiros cada um representando as porções que os convidados de dona Chica vão consumir. O primeiro inteiro representa as porções do Chico, o segundo do Bento, o terceiro do Bernardo, o quarto da Marina e o quinto a da Iara.

Saída

A saída consiste de um único inteiro que representa quanta mandioca Marlene deve preparar em gramas.

 

let bento = 1500 * parseInt(gets());
let bernardo = 600 * parseInt(gets());
let marina = 1000 * parseInt(gets());
let iara = 150 * parseInt(gets());
let marlene = 225;
let total = chico + bento + bernardo + marina + iara + marlene;

console.log(total);
let chico = 300 * parseInt(gets());

faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

Desafios Intermediários em JavaScript - Folha de Pagamento

 

Desafio

Precisamos saber quanto uma determinada empresa deve pagar para seus colaboradores, porém temos apenas a quantidade de horas trabalhadas e o valor hora. Escreva um programa que leia o número de um colaborador, seu número de horas trabalhadas, o valor que recebe por hora e calcula o salário desse colaborador. Em seguida, apresente o número e o salário do colaborador, com duas casas decimais.

 

const v1 = +gets(), v2 = +gets(), v3 = +gets(),
salary = (v2 * v3).toFixed(2);
console.log(`NUMBER = ${v1}`);
console.log(`SALARY = U$ ${salary}`);

faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

Desafios Intermediários em JavaScript - Área Superior

Leia um caractere maiúsculo, que indica uma operação que deve ser realizada e uma matriz M[12][12]. Em seguida, calcule e mostre a soma ou a média considerando somente aqueles elementos que estão na área superior da matriz.

// a função gets é implementada dentro do sistema para ler as entradas(inputs) dos dados
// Abaixo segue um exemplo de código que você pode ou não utilizar

const operator = gets();
const fl = gets();
let x = 1, y = 11, arr = [];

if (fl.match(/\s/g)) {
    const fn = x => x.replace(/\s+/g, ' ').trim().split(' ').map(e => +e);

    arr.push(...[fn(fl), ...Array.from(Array(4), () => fn(gets()))])
} else {
    arr.push([fl, ...Array.from(Array(11), _ => +gets())],
        ...Array.from(Array(4), _ =>
            Array.from(Array(12), _ => +gets()))
    );
};

const sum = arr.slice(0, 5)
    .flatMap(e => (e = e.slice(x, y), x++, y--, e))
    .reduce((a, b) => a + b);

const total = operator === 'M' ? sum / 30 : sum;
console.log(total.toFixed(1));

faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

Desafios de código em JavaScript - Análise de Números

 

Desafio

Você deve fazer a leitura de 5 valores inteiros. Em seguida mostre quantos valores informados são pares, quantos valores informados são ímpares, quantos valores informados são positivos e quantos valores informados são negativos.

Entrada

Você receberá 5 valores inteiros.

Saída

Exiba a mensagem conforme o exemplo de saída abaixo, sendo uma mensagem por linha e não esquecendo o final de linha após cada uma.


numero = Array(5);


numero[0] = gets();

numero[1] = gets();

numero[2] = gets();

numero[3] = gets();

numero[4] = gets();


pares = numero.filter(value => value % 2 == 0);

impares = numero.filter(value => value % 2 != 0);


positivos = numero.filter(value => value > 0);

negativos = numero.filter(value => value < 0);


console.log(pares.length + " valor(es) par(es)");

console.log(impares.length + " valor(es) impar(es)");


console.log(positivos.length + " valor(es) positivo(s)");

console.log(negativos.length + " valor(es) negativo(s)");


faço trabalhos avulsos de programação em php , javascript , html , VBA-EXCEL e EXCEL formulas avançadas . pode entrar em contato no whatsapp 83988596239. nós combinaremos os valores de acordo com a demanda.

Programando com JS 2 / 5 - Resto 2

  Desafio Leia um valor inteiro N . Apresente todos os números entre 1 e 10000 que divididos por N dão resto igual a 2. Entrada A ...