Take element data attr Datatables/jQuery

Question

I am developing a project in PHP, Mysql, jQuery and CSS, and I came across the following 'bug' (in quotes because it is not a bug in fact) using the plugin dataTables+bootstrap+ajax:

First a table is loaded with some data, and when a double click is given on some line a modal bootstrap is opened with a form, and when this modal is closed, the table is updated with what was filled in the form.

PROBLEM:

When the table is updated, it returns to pagination 1, I’m trying to make the pagination go back to the page where the user was, to do this I need to take the value of the attribute 'data-dt-ix' element '<li>' from the list of paging buttons:

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

All element <li> of that list have the class 'paginate_button', I need that:

When the element has the classes 'paginate_button' and 'active' it takes the value of the data attr 'data-dt-idx', so that I pass via parameter the function that loads the table and make it go to the correct page and I am not able to do this.

If anyone knows how to do it, or anywhere I research, I’d be grateful.

Answer 1

Gabriel, you would need to identify the <li> somehow p/ know in which li you will do this class check.

With the li identified you can check if she owns the classes as follows: if($("li").hasClass("paginate_button") && $("li").hasClass("active"))

If the condition is met, search within the li the hyperlink(<a>), it can be done like this: $("li").find('a').attr('data-dt-idx'), so you have the value of the attribute data-dt-idx

*Note that in the examples I always used $("li"), if you have more elements <li> on the page the selector will find and will not work, so at the beginning I spoke p/ identify the <li>, an example would be to put an attribute in it.

Answer 2

Opa, posted the question, and with the help of Mathias I was able to solve quickly, I will post as I did because it can be useful for other people:

This is the script that is executed when the modal closes and calls the table again:

$(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');
            }
        });
    }

});

After running this event php receives the page number, and after loading the table, make a loop and click on the button corresponding to the page the user was on:

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');
            }
        });

Answer 3

How do you recharge the datatable?
With fnReloadAjax() just pass true that it maintains, if you recreate the table, then yes your logic will make sense, in this case you would need to save the current page outside the scope where the buttons are and use it when pressing again, by the way, pick up the attr mentioned only use a Jquery:

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

in the click of paginate_button.

If you can put an example online it’s better.