1
A few months ago, a friend developed a small system to help me, although the code was confusing, it worked perfectly until the plugin called Datatable was added.
Code working normally (although confusing) without 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();
}
});
});
Code after the 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
});
});
Datatable was only added on the last line, but after that the two functions below stopped working:
$(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);
}
});
});
If anyone can help me with that, it’ll be wonderful, since I tried everything and couldn’t make it work.
Look in the browser console, see if there are any errors
– Lucas
Appeared in the console the error "Error: Syntax error, unrecognized Expression: input[type=sacras-missas Odd]", the impressive thing is that appears only after the use of Datatable, if I remove, works normally.
– Guilherme Henrique
Tries to initialize Datatables in a different table than
.dataTable, this component only works if the table is formatted right– Lucas
It won’t, any table I use Datatable, the same works correctly with paging, searching and others, but it causes error in the two functions I said, generating the error: "Error: Syntax error, unrecognized Expression: input[type=sacras-missas Odd]", the two functions only work again if I remove the Datatable code from the page, the problem is not Datatable but it affects the other two functions that are not even linked to it.
– Guilherme Henrique
One thing I know, this syntax is wrong:
input[tipo=sacras-missas odd]... first that you are using an attribute that does not exist in HTML, according to which the attribute value should be delimited with quotation marks, since there is a space in the middle.– Sam
I do not know why he is with this problem, since it only appears when I insert Datatable, I believe it is easier to understand accessing the two pages I did, this is without Datatable and by clicking "Less Executed" on the side and the button "Deselect All"works correctly as in link and this with Datatable link and that "Least Executed" and "Deselect All" stop working and the error I said appears.
– Guilherme Henrique