Skip to content

Instantly share code, notes, and snippets.

/html

Created September 28, 2017 17:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/89ccbf2d761ff6648c85e6625633e955 to your computer and use it in GitHub Desktop.
Save anonymous/89ccbf2d761ff6648c85e6625633e955 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>CURSO DATATABLES</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css”>
<link rel=”stylesheet” href=”https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css”>
<link rel=”stylesheet” href=”https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css”>
</head>
<body>
<div class=”container”>
<div class=”col-md-12″>
<h1>EJEMPLOS DATATABLES</h1>
<div class=”well”>
<table id=”table-contacto” class=”display” cellspacing=”0″ width=”100%”>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>NOMBRE PERSONA</th>
<th>DNI</th>
<th>TELEFONO</th>
<th>CORREO ELECTRONICO</th>
<th>FECHA CREACION</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js”></script>
<script src=”https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js”></script>
<script src=”//cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js”></script>
<script src=”https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js”></script>
<script>
var editor;
jQuery(document).ready(function($){
editor = $.extend(true, $.fn.dataTable.defaults,{
table: “#table-contacto”,
fields: [ {
label: “First name:”,
name: “idcontacto”
}, {
label: “Last name:”,
name: “nomcontac”
}, {
label: “Position:”,
name: “dnicontac”
}, {
label: “Office:”,
name: “telcontac”
}, {
label: “Extension:”,
name: “corcontac”
}, {
label: “Start date:”,
name: “feccontac”
}
]
});
$(‘#table-contacto’).on( ‘click’, ‘tbody td:not(:first-child)’, function (e) {
editor.inline( this );
} );
$(“#table-contacto”).DataTable({
dom: “Bfrtip”,
ajax: {
url: “http://localhost:82/PruebaDatatable/json/contacto.json”
},
columns: [
{
data: null,
defaultContent: ”,
className: ‘select-checkbox’,
orderable: false
},
{name: “idcontacto”, data: “idcontacto”},
{name: “nomcontac”, data: “nomcontac”},
{name: “dnicontac”, data: “dnicontac”},
{name: “telcontac”, data: “telcontac”},
{name: “corcontac”, data: “corcontac”},
{name: “feccontac”, data: “feccontac”}
],
select: {
style: ‘os’,
selector: ‘td:first-child’
},
buttons: [
{ extend: “create”, editor: editor },
{ extend: “edit”, editor: editor },
{ extend: “remove”, editor: editor }
]
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment