Estoy realizando una aplicación web y una de las tareas consiste en crear un botón que seleccione (deseleccione) todas las filas de un dataTable cada vez que se pulsa. El código es el siguiente, está realizado con jQuery y Javascript:
function allCheckUnCheck() {
var totalColumnas = $("#tabla-datos").DataTable().columns().nodes()[0].length;
var columnas = $("#tabla-datos").DataTable().columns().nodes();
var contadorNoClicados = 0;
var arrPosicionesNoClicadas = [];
$("#checkTodos").click(function () {
for (var cont = 0; cont < totalColumnas; cont++) {
var columnaActual = $("#tabla-datos").DataTable().columns().nodes()[0][cont].firstChild
if (!columnaActual.hasClass("activo")) {
contadorNoClicados++;
arrPosicionesNoClicadas.push(cont);
}
}
if (contadorNoClicados > 0) {
var longitudNoClicados = arrPosicionesNoClicadas.length
for (var contClic = 0; contClic < longitudNoClicados; contClic++) {
var posActualarrNoClicado = arrPosicionesNoClicadas[contClic];
var columnaActualNoClicada = $("#tabla-datos").DataTable().columns().nodes()[0][posActualarrNoClicado].firstChild.classList.add("activo");
}
} else if (contadorNoClicados === 0) {
for (var contTotal = 0; contTotal < totalColumnas; contTotal++) {
$("#tabla-datos").DataTable().columns().nodes()[0][contTotal].firstChild.classList.remove("activo");
}
}
}
);
};
La forma de seleccionar una celda es aplicar la clase activo.
El datatable es el siguiente:
function loadDatosDataTable(dataSet) {
//cargamos los datos que puedan venir
datos = [];
Array.prototype.push.apply(datos, dataSet);
//console.log(dataSet);
var columnDefs = [
{
"targets": [4],
"visible": false
},
{
"targets": [0],
"orderData": [4]
}
];
$.fn.dataTable.moment(selectedLanguageMomentDateType2);
var tablaDatos = $('#tabla-datos').on('init.dt', function () {
customColumnHeader(this.id);
//selectedRows();
$('#myModal').modal('hide');
})
.DataTable({
"data": dataSet,
"bProcessing":true,
"paging": true,
"bInfo": true, //Dont display info eg "Showing 1 to 4 of 4 entries"
"columnDefs": columnDefs,
"autoWidth": true,
"scrollX": true,
"deferRender": true,
"lengthMenu": [[10, 25, 50, 100,-1], [10, 25, 50,100, "Todos"]],
"columns": [
{
//"width":25,
"data": null, "title": "<div id='name'>" + literalesPage[53739] + "</div>" + "<button type='button' onclick='allCheckUnCheck()' value='Seleccionar/Deseleccionar' id='checkTodos'>" +
" <label for='checkTodos'>Sel./Desel. Todos</label>"
,
"render": function (data, type, full, meta) {
if (full.apto=="true" ) {
button = '<button class="btn seleccionar click activo" onclick="clikadoDato(this,\'' + isNull(data.resultado) + '\')" type="input"></button>';
} else {
button = '<button class="btn seleccionar click" onclick="clikadoDato(this,\'' + isNull(data.resultado) + '\')" type="input"></button>';
}
return button;
}
},
{ "data": "dato", "title": "<div id='name' >" + literalesPage[53723] + "</div>" },
{
"data": "fechanacimiento",
"title": "<div id='name'>" + literalesPage[53753] + "</div>",
"orderable": true
},
{
"data": "fecha",
"title": "<div id='name'>" + literalesPage[53740] + "</div>",
//"render": function (data, type, full, meta) {
// var fecha;
// if ((full.fecha != null)&(full.fecha != "")) {
// fecha = moment(full.fecha, momentDateTypes[selectedLanguage]).format(WSMomentDateType);
// };
// return fecha;
//}, class='asc'
"orderable": true
},
{ "data": "apto", "title": "<div id='name' > hidden</div>" }
//,
//{
// "data": "",
// // "className": 'anular',
// "orderable": false,
// "render": function (data, type, full, meta) {
// html = "";
// if (full.fecha != "") {
// html = '<a data-toggle="modal" data-target="#confirm-anular"><i id="anular" style="color: #2567e0" class="fa fa-trash"></a>';
// };class='asc'
// return html;
// }
//}
],
"order": [],
"language": {
"url": datatableLanguageUrl
}
});
$('#tabla-datos').on('draw.dt',
function () {
$('button[id^="pop"]').each(
function (index, button) {
var motivonoapto = tablaCrotales.row($(button).closest('tr')).data().motivonoapto;
$(button).parents('td').popover({ 'placement': 'top', 'content': motivonoapto, 'container': 'td' });
}
);
controlOrderShowHide(tablaDatos);
}
);
El problema que me da es que a la hora de cargar el datatable, para probar el evento, me aparece el siguiente mensaje:
DataTables warning: table id=tabla-datos - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
¿Se puede seleccionar este error? ¿A qué se debe? La información que da no me ha resultado útil. Gracias de antemano.