A alguns meses atrás, um amigo desenvolveu um pequenos sistema para me ajudar, apesar do código ser confuso, funcionava perfeitamente até ser adicionado o plugin chamado DataTable.
Código funcionando normalmente (apesar de confuso) sem o DataTable:
$(document).ready(function () {
//
$("tr.results").show();
$(document).on("click", "input.musica", function () {
var value = $(this).attr("haschildren");
var isChecked = $(this).is(":checked");
var menosExecutadas = $("#menos-executadas").is(":checked");
if (value == "true") {
var nomeCategoria = $(this).attr("tipo");
$("div.box-in").find("input[tipo='" + nomeCategoria + "']").each(function (key, value) {
$(value).prop("checked", isChecked);
var checkMusica = $(value);
var subtipo = $(value).attr("subtipo");
$("tr." + subtipo).each(function (key, vlr) {
var chkMenosExecutada = $(vlr).attr('menos-executadas') == "True" ? true : false;
if (checkMusica.is(":checked")) {
if(!menosExecutadas && chkMenosExecutada)
$(vlr).hide();
else
$(vlr).show();
} else {
$(vlr).hide();
}
});
});
} else {
var subtipo = $(this).attr('subtipo');
$("tr." + subtipo).each(function(key, value) {
var tableEntry = $(value);
var musicaMenosExecutada = $(value).attr('menos-executadas') == "True" ? true : false;
if(isChecked) {
if(!menosExecutadas && chkMenosExecutada)
tableEntry.hide();
else
tableEntry.show();
} else {
tableEntry.hide();
}
});
}
});
$(document).on("click", "#menos-executadas", function () {
var isChecked = $(this).is(":checked");
$("[menos-executadas='True']").each(function(key, value) {
var categoria = value.className.replace('results ', '');
var menuCheck = $('[subtipo=' + categoria +']');
if (isChecked && menuCheck[0].checked) {
$(value).show();
} else {
$(value).hide();
}
});
});
$(document).on("click", "#select_all", function(){
var isChecked = $(this).is(":checked");
$("tr.results").each(function(key, value) {
var categoria = value.className.replace('results ', '');
var menuCheck = $('input[tipo=' + categoria +']');
if (isChecked && menuCheck[0].checked) {
$(value).show();
} else {
$(value).hide();
$('input.musica').attr('checked', false);
}
});
});
$(document).on("click", "[name='id_musicas']", function () {
var checked = $(this).prop("checked");
if (checked == false) {
var element = $(this).closest("tr");
element.prop("checked", false);
element.hide();
}
});
});
Código após o DataTable:
$(document).ready(function () {
//
$("tr.results").show();
$(document).on("click", "input.musica", function () {
var value = $(this).attr("haschildren");
var isChecked = $(this).is(":checked");
var menosExecutadas = $("#menos-executadas").is(":checked");
if (value == "true") {
var nomeCategoria = $(this).attr("tipo");
$("div.box-in").find("input[tipo='" + nomeCategoria + "']").each(function (key, value) {
$(value).prop("checked", isChecked);
var checkMusica = $(value);
var subtipo = $(value).attr("subtipo");
$("tr." + subtipo).each(function (key, vlr) {
var chkMenosExecutada = $(vlr).attr('menos-executadas') == "True" ? true : false;
if (checkMusica.is(":checked")) {
if(!menosExecutadas && chkMenosExecutada)
$(vlr).hide();
else
$(vlr).show();
} else {
$(vlr).hide();
}
});
});
} else {
var subtipo = $(this).attr('subtipo');
$("tr." + subtipo).each(function(key, value) {
var tableEntry = $(value);
var musicaMenosExecutada = $(value).attr('menos-executadas') == "True" ? true : false;
if(isChecked) {
if(!menosExecutadas && chkMenosExecutada)
tableEntry.hide();
else
tableEntry.show();
} else {
tableEntry.hide();
}
});
}
});
$(document).on("click", "#menos-executadas", function () {
var isChecked = $(this).is(":checked");
$("[menos-executadas='True']").each(function(key, value) {
var categoria = value.className.replace('results ', '');
var menuCheck = $('[subtipo=' + categoria +']');
if (isChecked && menuCheck[0].checked) {
$(value).show();
} else {
$(value).hide();
}
});
});
$(document).on("click", "#select_all", function(){
var isChecked = $(this).is(":checked");
$("tr.results").each(function(key, value) {
var categoria = value.className.replace('results ', '');
var menuCheck = $('input[tipo=' + categoria +']');
if (isChecked && menuCheck[0].checked) {
$(value).show();
} else {
$(value).hide();
$('input.musica').attr('checked', false);
}
});
});
$(document).on("click", "[name='id_musicas']", function () {
var checked = $(this).prop("checked");
if (checked == false) {
var element = $(this).closest("tr");
element.prop("checked", false);
element.hide();
}
});
$('.dataTable').DataTable( {
"oLanguage": { "sUrl": "//cdn.datatables.net/plug-ins/1.10.18/i18n/Portuguese-Brasil.json"
},
"paging": false,
"ordering": false,
"info": false
});
});
Apenas foi adicionado o DataTable na última linha, mas depois disso as duas funções abaixo pararam de funcionar:
$(document).on("click", "#menos-executadas", function () {
var isChecked = $(this).is(":checked");
$("[menos-executadas='True']").each(function(key, value) {
var categoria = value.className.replace('results ', '');
var menuCheck = $('[subtipo=' + categoria +']');
if (isChecked && menuCheck[0].checked) {
$(value).show();
} else {
$(value).hide();
}
});
});
$(document).on("click", "#select_all", function(){
var isChecked = $(this).is(":checked");
$("tr.results").each(function(key, value) {
var categoria = value.className.replace('results ', '');
var menuCheck = $('input[tipo=' + categoria +']');
if (isChecked && menuCheck[0].checked) {
$(value).show();
} else {
$(value).hide();
$('input.musica').attr('checked', false);
}
});
});
Se alguma pessoa puder me ajudar com isso, será maravilhoso, já que tentei de tudo e não consegui fazer funcionar.
.dataTable
, esse componente só funciona se a table está formatada certinhoinput[tipo=sacras-missas odd]
... primeiro que vc tá usando um atributo inexistente no HTML, segundo que o valor do atributo deveria estar delimitado com aspas, já que existe um espaço no meio.