uno-de-piera · April 22, 2018 05:58
diff --git a/checkbox-datatables.html b/checkbox-datatables.html
 <html>

    <body>

    <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>
                                <th width="70">Acciones</th>
                            </tr>
                            </thead>
                        </table>
                        <hr />
                        <button type="submit">Eliminar todo</button>
                    </form>
                </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: '/',
                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>
	<html>

	<body>

	<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>
	<th width="70">Acciones</th>
	</tr>
	</thead>
	</table>
	<hr />
	<button type="submit">Eliminar todo</button>
	</form>
	</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: '/',
	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>