15 49.0138 8.38624 1 1 4000 1 https://celulanerd.com.br 100 0
theme-sticky-logo-alt
theme-logo-alt

Bootstrap Table – Atualizar informações

Fala galera!

Vou compartilhar agora com vocês uma dificuldade que eu vinha tendo em um sistema em PHP com o Bootstrap Table após atualizar informações nas colunas e linhas da tabela, eu consegui atualizar as informações utilizando jQuery mas depois que trocasse de página as nova informações sumiam e voltava ao “original”. Aí eu descobri o método page-change.bs.table e tudo ia bem quando trocava de página, até que hoje eu cliquei na ordenação e o problema voltou e nada funcionava, :/

Voltei as pequisas e a estudar os Docs do Bootstrap Table e encontrei a função reset-view.bs.table , ela observa tudo na tabela e resumi em uma função a necessidade de atualizar o novo html da tabela.

A necessidade é atualizar as colunas “status”, “pagamento” e “ação” com o novo html gerado a partir do sub-formulário de cada linha, e quando trocar de página ou re-ordenar essa nova informação criada não pode ser perdida, ou seja, não precisa atualziar a tela inteira para ver o resultado da atualização de cada linha.

Segue um trecho do Código:

function openStatus() {
    $('.dropdown-status').removeClass('d-block').addClass('d-none');
    $('[data-toggle="tooltip"]').tooltip();

    $('.data').unbind();
    $('.data').mask("99/99/9999");

    $('.btn-status').unbind();
    $('.btn-status').click(function(e) {
        if ($(this).parent().find('.dropdown-status').hasClass('d-none')) {
            $(this).parent().find('.dropdown-status').removeClass('d-none').addClass('d-block');
            $(this).parent().parent().parent().addClass('bg-soft-primary');            
        } else {
            $(this).parent().find('.dropdown-status').removeClass('d-block').addClass('d-none');
            $(this).parent().parent().parent().removeClass('bg-soft-primary');
        }
        e.preventDefault();
    });

    $('.copia_valor').unbind();
    $('.copia_valor').click(function(e) {
        var $tr = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
        $(this).parent().parent().find('input').val($tr.find('td:eq(3)').html());
        e.preventDefault();
    });

    $('.frmSubs').unbind();
    $(".frmSubs").submit(function(e){
        var $form = $(this);
        var $tr = $form.parent().parent().parent().parent(); // tr
        var $dataindex = $tr.data('index');
        /**
         * IMPORTANTE ATUALIZAR VIA ATRIBUTO - fixo
         */
        $tr.find('input[name*=f_valor]').attr('value', $tr.find('input[name*=f_valor]').val());
        $.ajax({
                    url: 'ajax.php',
                    type: 'post',
                    dataType: 'JSON',
                    data: $form.serialize(),
                    success: function(data) {
                             /**
                             * ATUALIZA COLUNAS
                             */
                            $('#table').bootstrapTable('updateCell', {
                                index: $dataindex,
                                field: 'status',
                                value: data.status
                            });

                            $('#table').bootstrapTable('updateCell', {
                                index: $dataindex,
                                field: 'action',
                                value: $tr.find('td:eq(7)').html()
                            });
                            
                            openStatus();
                    }).fail(function() {
                    
                    });
        });
        e.preventDefault();
    });
}
!function($) {
    $(document).ready(function(){
        var $table = $('#table').bootstrapTable();
        $table.on('reset-view.bs.table', function (e) {
            /* chamo sempre uma função que atualiza o html e o javascript que existirem na tabela */
            openStatus();
        });
    });
}(window.jQuery);

Link da biblioteca: https://bootstrap-table.com/

Compartilhe:
POST ANTERIOR
Por que criar site com WordPress
PRÓXIMO POST
Crie vídeos para Social Media

0 Comentário

    RESPONDER