Paste data attr from DataTables / jQuery element

Navigation
0

I'm developing a project in PHP, MySQL, jQuery and CSS, and I came across the following bug (in quotation marks because it's not a bug in fact) using the dataTables + bootstrap + ajax plugin:

First a table with some data is loaded, 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 get paging back on the page the user was in, to do this I need to get the 'data-dt-ix' <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 <li> elements of this list have class 'paginate_button', I need to:

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

If someone knows how to do it, or some place where I search, I'll be grateful.

    
asked by anonymous 13.04.2017 / 15:45

3 answers

1

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

This is the script that runs 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 executing this event php receives the page number, and after loading the table, it loops and clicks the button corresponding to the page the user was in: 

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');
            }
        });
    
13.04.2017 / 16:20
1

Gabriel, you would need to identify <li> in some way to know in which li you will do this class verification.

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

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

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

    
13.04.2017 / 16:04
0

How do you reload datatable ? With fnReloadAjax() it is only to pass true that it maintains, if you recreate the table, then your logic will have meaning, in this case, you would need to save the current page out of the scope where the buttons are and use it when loading again, By the way, getting the attr mentioned just use a JQuery:

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

no click of paginate_button .

If you can put an example online it is best.

    
13.04.2017 / 16:06
PHP PDO does not insert value Find key and corresponding value in text file