DataTables

DataTables Examples

by Raúl Rojas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
 <table class="display table table-bordered table-striped table-hover table-responsive" id="myTable" style="width: 100%">
                            <thead>
                            <tr>
                                <th>Asignatura</th>
                                <th>Tipo Institución</th>
                                <th>Institución</th>
                                <th>Nivel</th>
                                <th>Programa / Carrera</th>
                                <th><i class="fas fa-female"></i>&nbsp;Mujeres</th>
                                <th><i class="fas fa-male"></i>&nbsp;Hombres</th>
                                <th><i class="fas fa-sliders-h"></i>&nbsp;Acciones</th>
                                <th>Ciclo</th>
                                <th>Horas / semana</th>
                                <th>Horas efectivas</th>
                            </tr>
                            </thead>
                            <tbody>
                                                            <tr>
                                    <td>Antropología social</td>
                                    <td>
                                        NAC
                   ...

JavaScript

$('#myTable').on('responsive-display.dt', function() {
  $('#myTable tr [data-toggle="popover"]').popover()
})

var table = $('#myTable').DataTable({
                responsive: true,
                buttons: [
                    'copy', 'excel', 'pdf'
                ],
                language: {
  "sProcessing": "Procesando...",
  "sLengthMenu": "Mostrar _MENU_ registros",
  "sZeroRecords": "No se encontraron resultados",
  "sEmptyTable": "Ningún dato disponible en esta tabla",
  "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
  "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
  "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
  "sInfoPostFix": "",
  "sSearch": "Buscar:",
  "sUrl": "",
  "sInfoThousands": ",",
  "sLoadingRecords": "Cargando...",
  "oPaginate": {
    "sFirst": "Primero",
    "sLast": "Último",
    "sNext": "Siguiente",
    "sPrevious": "Anterior"
  },
  "oAria": {
    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
  }
},
        });