API tools faq
paste
Advertisement
LucianoCharles2017

DataTable

LucianoCharles2017
Oct 27th, 2019
607
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 8.60 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="pt_BR">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>DataTable ++PHP</title>
  8.  
  9.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
  10.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
  11.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css"/>
  12.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.min.css"/>
  13.  
  14.  
  15. </head>
  16. <body>
  17. <div class="container">
  18.  
  19.     <div class="row">
  20.         <div class="col-12 mt-5">
  21.             <div id="dataTable-custom">
  22.                 <div class="col-12" id="dataTable-group-buttons" style="padding: 0;">
  23.                     <div class="row">
  24.                         <div class="col-sm" id="buttons-export"></div>
  25.                         <div class="col-sm" id="input-search"></div>
  26.                     </div>
  27.                 </div>
  28.                 <table id="dataTable" class="nowrap stripe table table-bordered table-striped" width="100" style="width: 100% !important;">
  29.                     <thead>
  30.                     <tr>
  31.                         <th>ID</th>
  32.                         <th>Nome</th>
  33.                         <th>E-Mail</th>
  34.                     </tr>
  35.                     </thead>
  36.                     <tbody>
  37.                     <?php for ($x = 0; $x < 100; $x++){ ?>
  38.                         <tr>
  39.                             <td><?php echo "Id{$x}"; ?></td>
  40.                             <td><?php echo "Nome{$x}"; ?></td>
  41.                             <td><?php echo "Email{$x}"; ?></td>
  42.                         </tr>
  43.                     <?php } ?>
  44.  
  45.                     </tbody>
  46.                 </table>
  47.                 <div class="col-12" style="padding: 0;">
  48.                     <div class="row">
  49.                         <div class="col-sm" id="label-sInfoEmpty">
  50.                     </div>
  51.                     <div class="col-sm" id="buttons-pagination"></div>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </div>
  57. <!-- end row -->
  58.  
  59. </div> <!-- container -->
  60.  
  61. <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  62. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
  63. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  64. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  65. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  66. <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
  67. <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
  68. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
  69. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
  70. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
  71. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
  72. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
  73. <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
  74. <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>
  75.  
  76.  
  77. <script>
  78.     $("#dataTable").DataTable({
  79.         "dom": 'Bfrtip',
  80.         "buttons": [
  81.             {extend: 'copy', exportOptions: {columns: [0,1,2]}},
  82.             {extend: 'excel', exportOptions: {columns: [0,1,2]}},
  83.             {extend: 'pdfHtml5', exportOptions: {columns: [0,1,2]}},
  84.             {extend: 'print', exportOptions: {columns: [0,1,2]}},
  85.             'pageLength'
  86.         ],
  87.         "responsive": true,
  88.         "lengthMenu": [
  89.             [5, 10, 15, 20, 25, 50, 100, -1],
  90.             ["5 linhas por página",
  91.                 "10 linhas por página",
  92.                 "15 linhas por página",
  93.                 "20 linhas por página",
  94.                 "25 linhas por página",
  95.                 "50 linhas por página",
  96.                 "100 linhas por página",
  97.                 "Todos"
  98.             ]
  99.         ],
  100.         "pagingType": 'full',
  101.         "deferRender": true,
  102.         "searching": [{"regex": true}],
  103.         "columnDefs": [
  104.             {"targets": [0], "orderable": true, "searchable": true, "visible": true, "width": '5%'},
  105.             {"targets": [1,2], "orderable": true, "searchable": true, "visible": true, "width": '25%'}
  106.         ],
  107.         "language": {
  108.             "buttons": {
  109.                 "copy": "Copiar",
  110.                 "excel": "Excel",
  111.                 'pdf': 'PDF',
  112.                 "print": "Imprimir",
  113.                 "pageLength": 'Mostrando'
  114.             },
  115.             "sEmptyTable": "Nenhum registro encontrado",
  116.             "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
  117.             "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
  118.             "sInfoFiltered": "(Filtrados de _MAX_ registros)",
  119.             "sInfoPostFix": "",
  120.             "sInfoThousands": ".",
  121.             "sLengthMenu": "_MENU_ resultados por página",
  122.             "sLoadingRecords": "Carregando...",
  123.             "sProcessing": "Processando...",
  124.             "sZeroRecords": "Nenhum registro encontrado",
  125.             "sSearch": "Pesquisar",
  126.             "oPaginate": {
  127.                 "sNext": "Próximo",
  128.                 "sPrevious": "Anterior",
  129.                 "sFirst": "Primeiro",
  130.                 "sLast": "Último"
  131.             },
  132.             "oAria": {
  133.                 "sSortAscending": ": Ordenar colunas de forma ascendente",
  134.                 "sSortDescending": ": Ordenar colunas de forma descendente"
  135.             }
  136.         },
  137.     });
  138.  
  139.     /**
  140.      * Class DataTable
  141.      *
  142.      * @author Luciano Charles de Souza
  143.      * E-mail: [email protected]
  144.      * Github: https://github.com/LucianoCharlesdeSouza
  145.      * YouTube: https://www.youtube.com/channel/UC2bpyhuQp3hWLb8rwb269ew?view_as=subscriber
  146.      */
  147.     let CustomStyleDataTable = function () {
  148.         "use strict";
  149.         return {
  150.             aplly: function () {
  151.                 $('button[class="btn btn-secondary buttons-copy buttons-html5"]').removeClass('btn-secondary').addClass('btn-primary');
  152.                 $('button[class="btn btn-secondary buttons-excel buttons-html5"]').removeClass('btn-secondary').addClass('btn-success');
  153.                 $('button[class="btn btn-secondary buttons-csv buttons-html5"]').removeClass('btn-secondary').addClass('btn-default');
  154.                 $('button[class="btn btn-secondary buttons-pdf buttons-html5"]').removeClass('btn-secondary').addClass('btn-warning');
  155.                 $('button[class="btn btn-secondary buttons-print"]').removeClass('btn-secondary').addClass('btn-info');
  156.  
  157.  
  158.                 $("div.dt-buttons.btn-group").prop('id', 'btn-exports');
  159.                 $("div #buttons-export").append($("div #btn-exports"));
  160.                 $("div #input-search").append($("div #dataTable_filter label input"));
  161.                 $("div #input-search input").prop("placeholder", 'Pesquise aqui...');
  162.                 $("div #dataTable_filter").remove();
  163.  
  164.  
  165.                 $("div #btn-exports button").css({"fontSize": "0.785em"});
  166.  
  167.                 $("div #label-sInfoEmpty").append($("div #dataTable_info"));
  168.                 $("div #label-sInfoEmpty").css({"display": "flex", "justifyContent": "center"});
  169.  
  170.                 $("div #buttons-pagination").append($("div #dataTable_paginate"));
  171.                 $("div #buttons-pagination").css({"display": "flex", "justifyContent": "center"});
  172.  
  173.                 $("div #dataTable-custom").css({
  174.                     "padding": "20px 20px 5px 20px",
  175.                     "border": "1px solid #CCCCCC",
  176.                     "border-radius": "4px",
  177.                     "backgroudColor": "#FFFFFF"
  178.                 });
  179.             }
  180.         };
  181.     }();
  182.  
  183.     CustomStyleDataTable.aplly();
  184. </script>
  185.  
  186. </body>
  187. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!