Skip to content

Instantly share code, notes, and snippets.

@LucianoCharlesdeSouza

LucianoCharlesdeSouza/index.php

Created August 25, 2020 02:35
Show Gist options
  • Save LucianoCharlesdeSouza/d40d3c3b5d3166e6f54abadb81fac72c to your computer and use it in GitHub Desktop.
Save LucianoCharlesdeSouza/d40d3c3b5d3166e6f54abadb81fac72c to your computer and use it in GitHub Desktop.
Download ZIP
DataTable
Raw
index.php
<!doctype html>
<html lang="pt_BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DataTable ++PHP</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<div id="dataTable-custom">
<div class="col-12" id="dataTable-group-buttons" style="padding: 0;">
<div class="row">
<div class="col-sm" id="buttons-export"></div>
<div class="col-sm" id="input-search"></div>
</div>
</div>
<table id="dataTable" class="nowrap stripe table table-bordered table-striped" width="100" style="width: 100% !important;">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<?php for ($x = 0; $x < 100; $x++){ ?>
<tr>
<td><?php echo "Id{$x}"; ?></td>
<td><?php echo "Nome{$x}"; ?></td>
<td><?php echo "Email{$x}"; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="col-12" style="padding: 0;">
<div class="row">
<div class="col-sm" id="label-sInfoEmpty">
</div>
<div class="col-sm" id="buttons-pagination"></div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div> <!-- container -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>
<script>
$("#dataTable").DataTable({
"dom": 'Bfrtip',
"buttons": [
{extend: 'copy', exportOptions: {columns: [0,1,2]}},
{extend: 'excel', exportOptions: {columns: [0,1,2]}},
{extend: 'pdfHtml5', exportOptions: {columns: [0,1,2]}},
{extend: 'print', exportOptions: {columns: [0,1,2]}},
'pageLength'
],
"responsive": true,
"lengthMenu": [
[5, 10, 15, 20, 25, 50, 100, -1],
["5 linhas por página",
"10 linhas por página",
"15 linhas por página",
"20 linhas por página",
"25 linhas por página",
"50 linhas por página",
"100 linhas por página",
"Todos"
]
],
"pagingType": 'full',
"deferRender": true,
"searching": [{"regex": true}],
"columnDefs": [
{"targets": [0], "orderable": true, "searchable": true, "visible": true, "width": '5%'},
{"targets": [1,2], "orderable": true, "searchable": true, "visible": true, "width": '25%'}
],
"language": {
"buttons": {
"copy": "Copiar",
"excel": "Excel",
'pdf': 'PDF',
"print": "Imprimir",
"pageLength": 'Mostrando'
},
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
},
});
/**
* Class DataTable
*
* @author Luciano Charles de Souza
* E-mail: [email protected]
* Github: https://github.com/LucianoCharlesdeSouza
* YouTube: https://www.youtube.com/channel/UC2bpyhuQp3hWLb8rwb269ew?view_as=subscriber
*/
let CustomStyleDataTable = function () {
"use strict";
return {
aplly: function () {
$('button[class="btn btn-secondary buttons-copy buttons-html5"]').removeClass('btn-secondary').addClass('btn-primary');
$('button[class="btn btn-secondary buttons-excel buttons-html5"]').removeClass('btn-secondary').addClass('btn-success');
$('button[class="btn btn-secondary buttons-csv buttons-html5"]').removeClass('btn-secondary').addClass('btn-default');
$('button[class="btn btn-secondary buttons-pdf buttons-html5"]').removeClass('btn-secondary').addClass('btn-warning');
$('button[class="btn btn-secondary buttons-print"]').removeClass('btn-secondary').addClass('btn-info');
$("div.dt-buttons.btn-group").prop('id', 'btn-exports');
$("div #buttons-export").append($("div #btn-exports"));
$("div #input-search").append($("div #dataTable_filter label input"));
$("div #input-search input").prop("placeholder", 'Pesquise aqui...');
$("div #dataTable_filter").remove();
$("div #btn-exports button").css({"fontSize": "0.785em"});
$("div #label-sInfoEmpty").append($("div #dataTable_info"));
$("div #label-sInfoEmpty").css({"display": "flex", "justifyContent": "center"});
$("div #buttons-pagination").append($("div #dataTable_paginate"));
$("div #buttons-pagination").css({"display": "flex", "justifyContent": "center"});
$("div #dataTable-custom").css({
"padding": "20px 20px 5px 20px",
"border": "1px solid #CCCCCC",
"border-radius": "4px",
"backgroudColor": "#FFFFFF"
});
}
};
}();
CustomStyleDataTable.aplly();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment