Skip to content

Instantly share code, notes, and snippets.

@edgardo001

edgardo001/index.html

Last active January 7, 2023 16:04
Show Gist options
  • Save edgardo001/f383367aa23692dd54a9605919f38deb to your computer and use it in GitHub Desktop.
Save edgardo001/f383367aa23692dd54a9605919f38deb to your computer and use it in GitHub Desktop.
Download ZIP
Demo simple de Datatables , incluye Jquery, Datatables js, Bootstrap 4, Font Awesome 5 y Lenguaje Español para Datatables
Raw
index.html
<!DOCTYPE html>
<head>
<title>Untitled-2</title>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.4/js/responsive.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead>
<tr>
<th>nombre 1</th>
<th>posicion 2</th>
<th>salario 3</th>
<th>oficina 4</th>
<th></th>
</tr>
</thead>
</table>
</div>
</body>
<script>
var lang = {
"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"
},
"buttons": {
"copy": "Copiar",
"colvis": "Visibilidad"
}
}
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
//Despuesde cargada la pagina, se proceden a enlazar los elementos con jquery
$(document).ready(function () {
//Enlazando tabla con datos AJAX
var table = $('#example').DataTable({
language: lang,
data: data,
columns: [{
data: 'name'
}, {
data: 'position'
}, {
data: 'salary'
}, {
data: 'office'
},
{
data: null,
render: function (data, type, row, meta) {
return '<a id="btnEdit" class="btn btn-sm btn-success"><i class="fa fa-edit"></i></a>';
}
}
],
});
//En lazando botones de la tabla
$(document).on('click', '#btnEdit', function () {
var data = table.row($(this).parents('tr')).data();
alert(data['name']);
});
$(document).on('click', '#btnDelete', function () {
var data = table.row($(this).parents('tr')).data();
alert(data['salary']);
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment