Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera

uno-de-piera/companies.json

Last active March 13, 2018 12:05
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 uno-de-piera/5f59791ffdf5a4c3112a65fb7adf375b to your computer and use it in GitHub Desktop.
Save uno-de-piera/5f59791ffdf5a4c3112a65fb7adf375b to your computer and use it in GitHub Desktop.
Download ZIP
Datatables with checkbox column
Raw
companies.json
{
"data": [
{"id":1, "check": "<input type='checkbox' name='selected_elements[]' value='0'>", "name":"Skinte","starts":"01/10/2016","description":"Etiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.\n\nPraesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit."},
{"id":2, "check": "<input type='checkbox' name='selected_elements[]' value='0'>","name":"Kamba","starts":"15/12/2016","description":"Vestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis.\n\nDuis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.\n\nMauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet."},
{"id":3, "check": "<input type='checkbox' name='selected_elements[]' value='0'>","name":"Brainlounge","starts":"26/08/2017","description":"Pellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n\nEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.\n\nPraesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio."},
{"id":4, "check": "<input type='checkbox' name='selected_elements[]' value='0'>","name":"Kwideo","starts":"12/01/2017","description":"Proin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.\n\nAenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.\n\nCurabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est."}
]
}
Raw
datatables.html
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body">
<form action="/" id="my-form">
<table class="table table-striped table-bordered nowrap" cellspacing="0" id="my-table">
<thead>
<tr>
<th><input type="checkbox" name="select_all" /></th>
<th>Id</th>
<th>Nombre</th>
</tr>
</thead>
</table>
<hr />
<button type="submit">Eliminar todo</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
let dt, rows_selected = [];
jQuery(function()
{
let i = 0;
dt = jQuery('#my-table').DataTable({
language: {
url: "//cdn.datatables.net/plug-ins/1.10.13/i18n/Spanish.json",
},
processing: true,
serverSide: false,
ajax: {
url: "./companies.json"
},
columns: [
{ data: 'check', name: 'check', orderable: false },
{ data: 'id', name: 'id', visible: false },
{ data: 'name', name: 'name' },
],
rowCallback: function(row, data, dataIndex){
// Id de la fila
const rowId = data[0];
// Si el ID de fila está en la lista de identificadores de fila seleccionados
if(jQuery.inArray(rowId, rows_selected) !== -1){
jQuery(row).find('input[type="checkbox"]').prop('checked', true);
jQuery(row).addClass('selected');
}
}
});
jQuery('#my-table tbody').on('click', 'input[type="checkbox"]', function(e){
let $row = jQuery(this).closest('tr');
// obtenemos la info de la fila
let data = dt.row($row).data();
// obtenemos el id
let rowId = data['id'];
// miramos si la Id está en la lista de ids ya seleccionados
let index = jQuery.inArray(rowId, rows_selected);
// Si el checkbox está marcado y el id de fila no está en el array de fila seleccionados añadimos
if(this.checked && index === -1){
rows_selected.push(rowId);
// en otro caso, si la casilla de verificación no está marcada y el id está en la lista de identificadores de fila seleccionados eliminamos
} else if (!this.checked && index !== -1){
rows_selected.splice(index, 1);
}
if(this.checked){
$row.addClass('selected');
} else {
$row.removeClass('selected');
}
// actualizamos
updateDataTableSelectAllCtrl(dt);
// Evitar que el evento de clic se propague a los padres
e.stopPropagation();
});
// Manejamos el evento clic en las celdas de la tabla con checkboxes
jQuery('#my-table').on('click', 'tbody td, thead th:first-child', function(e){
jQuery(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Manejamos el evento clic para seleccionar todos
jQuery('thead input[name="select_all"]', dt.table().container()).on('click', function(e){
if(this.checked){
jQuery('#my-table tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
jQuery('#my-table tbody input[type="checkbox"]:checked').trigger('click');
}
// Evitar que el evento de clic se propague a los padres
e.stopPropagation();
});
// actualizamos
dt.on('draw', function(){
updateDataTableSelectAllCtrl(dt);
});
// Handle form submission event
jQuery('#my-form').on('submit', function(e){
e.preventDefault();
let form = this;
// Itera sobre todas las casillas de verificación seleccionadas
jQuery.each(rows_selected, function(index, rowId){
// Crea un campo oculto
jQuery(form).append(
jQuery('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
jQuery.ajax({
url: '/batch-remove',
method: 'DELETE',
data: {
selected: rows_selected
},
success: function (data) {
dt.ajax.reload();
},
error: function(event, xhr)
{
},
complete: function () {
}
});
});
});
function updateDataTableSelectAllCtrl(table){
let $table = table.table().node();
let $chkbox_all = jQuery('tbody input[type="checkbox"]', $table);
let $chkbox_checked = jQuery('tbody input[type="checkbox"]:checked', $table);
let chkbox_select_all = jQuery('thead input[name="select_all"]', $table).get(0);
// Si ningún checkbox está marcado
if($chkbox_checked.length === 0){
chkbox_select_all.checked = false;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// Si todos los checkboxs está marcado
} else if ($chkbox_checked.length === $chkbox_all.length){
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// Si algún checkbox está marcado
} else {
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = true;
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment