datatable - Exibir Datatable Pai x Filho

Tenho um pai x filho que recebo os dados do comprador, ao clicar no botão "Ver Itens", ele traz um datatable (descarregado no id="target") associado ao comprador.

O problema é que esse datatable está sendo exibido antes da linha do comprador. Gostaria que fosse abaixo.

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Dados do Comprador</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="row">
        <div class="col-md-12">
          <div class="form-field table-responsive" data-type="tabledetail" data-field-name="tabledetail">
            <table class="table table-hover" cellspacing="0" tablename="tbl_comprador" noaddbutton="true"
              nodeletebutton="true">
              <thead>
                <tr class="tableHeadRow">
                  <th class="tableColumn">Comprador</th>
                  <th class="tableColumn">Qtdd Itens</th>
                  <th class="tableColumn">Valor</th>
                  <th class="tableColumn">Botão Itens</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-4 col-xs-12">
                    <div class="form-field">
                      <input type="text" class="form-control" name="nm_comprador" readonly />
                    </div>
                    <br>
                  </td>
                  <td class="col-md-3 col-xs-12">
                    <div class="form-field">
                      <input type="text" class="form-control" name="vl_qtd_itens" readonly />
                    </div>
                  </td>
                  <td class="col-md-3 col-xs-12">
                    <div class="form-field">
                      <input type="text" class="form-control" name="vl_valor_itens" readonly />
                    </div>
                  </td>
                  <td class="col-md-2 col-xs-12">
                    <div class="form-field">
                      <input type="hidden" name="nm_cod_comprador" id="nm_cod_comprador">
                      <button style="cursor:pointer;" class="btn btn-info" name='btn_itens'
                        id="btn_itens" onclick="buscaItensComprador(this);" title="Ver Itens"
                        value="Ver Itens">Ver Itens</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <div id="target"></div> 
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Não entendi a parte de remover a TR antes de prosseguir com o processo, poderia explicar melhor? Então, o modal foi minha primeira opção, mas as vezes são muitos itens e o scroll do modal não descia até o último.

— Marcella 29 de Jul de 2020

Bom, primeiro o certo seria ter uma TD dentro da TR com o target da datatable. Na função buscaItensComprador você criaria uma TR irmã da TR clicada, coloca o target ali e então manda exibir. Quanto a remover a TR extra antes de prosseguir é por que o Fluig processa a "Pai x Filho" quando submete o formulário e talvez ter essa TR nela só pra exibir outros dados pode influenciar nesse processamento e desconfigurar os itens. Mas nunca tentei isso pra saber como prosseguir corretamente. Mas pra exibir novos detalhes teria que remover a TR ou mudar o ID do target (IDs não podem ser repetidos).

— Bruno Gasparetto 29 de Jul de 2020

Entendi. Eu queria fazer algo tipo desse tópico https://forum.fluig.com/328-tabela-pai-filho-dentro-de-outra-tabela-pai-filho, mas sem sucesso, não exibiu o datatable.

coloquei um exemplo de como inserir a TR após a linha onde clicou pra ver os detalhes. Não testei no Fluig por estar sem acesso a ele nesse momento.

Obrigada, dessa forma funcionou, mas agora querem isso de forma automática, sem clique no botão. Utilizei o each para percorrer, mas dessa forma ele exibe apenas os itens do último comprador. Tem como startar sem sobrescrever os dados?

$("input[id^='nm_cod_comprador___']").each(function (index, value) {})

Funcionou alterando a tr. Obrigada.

 var tr = $(input).closest("tr");
 tr.after('<tr id="wrapper"><td colspan="4"><div id="' + targetId + '"></div></td></tr>');

— Marcella 08 de Sep de 2020

fluig forum

Exibir Datatable Pai x Filho

Comentário

1 resposta

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags datatable paifilho ou faça a sua própria pergunta.