1

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.

6
  • Olha no console do navegador, vê se tem algum erro
    – Lucas
    Commented 27/06/2019 às 17:15
  • Apareceu no console o erro "Error: Syntax error, unrecognized expression: input[tipo=sacras-missas odd]", o impressionante é que aparece apenas após o uso do DataTable, se eu removo, funciona normalmente. Commented 27/06/2019 às 17:27
  • Tenta inicializar o DataTables em uma tabela diferente sem ser a .dataTable, esse componente só funciona se a table está formatada certinho
    – Lucas
    Commented 27/06/2019 às 17:32
  • Não vai, qualquer tabela que eu uso o DataTable, o mesmo funciona corretamente com paginação, busca e outros, mas ele causa erro nas duas funções que eu disse, gerando o erro: "Error: Syntax error, unrecognized expression: input[tipo=sacras-missas odd]", as duas funções só voltam a funcionar se eu removo o código do DataTable da página, o problema não é o DataTable e sim ele afetar as outras duas funções que nem estão ligadas a ele. Commented 27/06/2019 às 17:48
  • Uma coisa eu sei, essa sintaxe está errada: input[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.
    – Sam
    Commented 27/06/2019 às 18:31

1 Resposta 1

0

Esse erro está acontecendo quando você usa o Datatables porque ele adiciona classes odd e even (stripe classes) nas classes das linhas, e com isso está ocasionando erro quando você pega essas classes para usar como seletor do jQuery.

Para evitar isso, coloque a opção stripeClasses com um valor de array vazia. Desta forma não serão adicionadas às linhas essas classes:

$('.dataTable').DataTable( {
   "oLanguage": { "sUrl": "//cdn.datatables.net/plug-ins/1.10.18/i18n/Portuguese-Brasil.json"
   },
   "paging":   false,
   "ordering": false,
   "info":     false
   ,"stripeClasses": []
});
1
  • Perfeito, funcionou corretamente agora, muito obrigado!! Commented 27/06/2019 às 20:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .