0

Estou desenvolvendo um projeto em PHP, MySQL, jQuery e CSS, e me deparei com o seguinte 'bug' (entre aspas pois não é um bug de fato) usando o plugin dataTables+bootstrap+ajax:

Primeiro é carregado um tabela com alguns dados, e quando é dado um double click em alguma linha é aberto uma modal bootstrap com um formulário, e quando essa modal é fechada, a tabela é atualizada com o que foi preenchido no formulário.

PROBLEMA:

Quando a tabela é atualizada, ela retorna para paginação 1, estou tentando fazer com que a paginação volte na página em que o usuário estava, pra fazer isso preciso pegar o valor do atributo 'data-dt-ix' do elemento '<li>' da lista dos botões de paginação:

<li class="paginate_button active">
<a href="#" aria-controls="DataTables_Table_1" data-dt-idx="1" tabindex="0">1</a></li>

Todos os elemento <li> dessa lista possuem a classe 'paginate_button', eu preciso que:

Quando o elemento possuir as classes 'paginate_button' e 'active' ele pegue o valor do data attr 'data-dt-idx', pra que que eu passe via parâmetro a função que carrega a tabela e faça com que ele vá para a página correta e não estou conseguindo fazer isso.

Se alguém souber como fazer, ou algum lugar onde eu pesquise ficarei agradecido.

3 Respostas 3

1

Gabriel, tu precisaria identificar a <li> de alguma maneira p/ saber em qual li tu vai fazer essa verificação de classes.

Com a li identificada tu pode verificar se ela possui as classes da seguinte forma: if($("li").hasClass("paginate_button") && $("li").hasClass("active"))

Caso a condição for satisfeita, procura dentro da li o hyperlink(<a>), isso pode ser feito assim: $("li").find('a').attr('data-dt-idx'), assim tu tem o valor do atributo data-dt-idx

*Nota que nos exemplos eu utilizei sempre $("li"), se tu tiver mais elementos <li> na página o seletor vai encontrar e não vai dar certo, por isso no começo falei p/ identificar a <li>, um exemplo seria colocar um atributo nela.

1

Opa, postei a pergunta, e com a ajuda do Mathias consegui resolver rapidinho, vou postar como eu fiz pois pode ser útil pra outras pessoas:

Esse é o script que que é executado quando a modal fecha e que chama novamente a tabela:

$(document).on('click', '.exec_filter_btn', function () {
    var setor = $(this).data('setor');
    var menu = $(this).data('menu');
    
    var pg = $('.paginate_button.active a').text();
    if (menu === 'operacional') {
        var empresa = $('.filtro_empresa').val();
        var regime = $('.regime_tributario').val();
        var mes_ano = $('.data').val();
        var status = $('.status').val();

        $.ajax({
            type: "POST",
            url: "callFunctions.php",
            data: {pg:pg,regime: regime, empresa: empresa, mes_ano: mes_ano, status: status, menu: menu, setor: setor, funcao: 'load_list_controle_' + setor + '_' + menu},
            dataType: 'html',
            success: function (data)
            {
                $('.conteudo_' + setor).html(data);
                $('.listaEmpresasTabela tr').css('cursor', 'pointer');
            }
        });
    }
    if (menu === 'relatorios') {
        var empresa = $('.nome_empresarial').val();
        var regime = $('.filtro_por_regime').val();
        var mes_ano = $('.data_m_a_relacionada_filtro').val();
        var status = $('.status_conclusao').val();
        var responsavel = $('.filtro_por_colaborador').val();
        var tipo_de_relatorio = $('.selecionar_tipo_de_relatorio').val();
        var obrigacao_acessoria = $('.filtro_por_obrigacao_acessoria').val();
        if ($('.exibir_grupos_checkbox').is(":checked"))
        {
            var grupo = '1';
        } else {
            grupo = '0';
        }

        $.ajax({
            type: "POST",
            url: "callFunctions.php",
            data: {pg:pg,responsavel: responsavel, grupo: grupo, tipo_de_relatorio: tipo_de_relatorio, obrigacao_acessoria: obrigacao_acessoria, regime_tributario: regime, empresa: empresa, mes_ano: mes_ano, status: status, menu: menu, setor: setor, funcao: 'call_render_relatorio'},
            dataType: 'html',
            success: function (data)
            {
                $('.conteudo_' + setor).html(data);
                $('.listaEmpresasTabela tr').css('cursor', 'pointer');
            }
        });
    }

});

Após executar esse evento o php recebe o número da página, e após o carregamento da tabela, efetua um loop e clica no botão correspondente a página em que o usuário estava:

var pg = "<?php echo $_POST['pg'] ?>";
        var find_pg = '';
        $('.paginate_button a').each(function (i, obj) {
            find_pg = $(this).text();
            if (pg === find_pg) {
               
                $(this).trigger('click');
            }
        });

0

Como você recarrega o datatable?
Com fnReloadAjax() é só passar true que ele mantém, se você recria a tabela, aí sim sua lógica terá sentido, neste caso, você precisaria salvar a página atual fora do escopo onde estão os botões e usar ele quando carregar novamente, a propósito, pegar o attr mencionado é só usar um JQuery:

$(this).find(a).data('dt-idx')

no click do paginate_button.

Se conseguir colocar um exemplo online é melhor.

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 .