Datatable - click do botão retorna sempre o primeiro registro

Tenho um Datatable, que possui um botão Detalhar. Quando clico no botão Detalhar, ele deve abrir um Modal e exibir os detalhamentos do Pedido.

Já consigo exibir o Modal com as informações do Pedido, porém agora ele só me retorna o Objeto da 1º linha do Datatable, independente de qual linha eu selecione.

HTML

<div class="panel panel-default" id="divFiltroTabela">
        <div class="panel-heading">
            <h3 class="panel-title">Listagem dos Orçamentos para Analise</h3>
        </div>

        <div class="panel-body">
            <div class="form-group col-md-12">
                <table id="table1" class="table table-striped" noaddbutton="true" nodeletebutton="true">

                </table>
            </div>
        </div>
    </div>
<script type="text/template" class="template-datatable">
    <tr class="linha-tabela">
        <td class="fs-v-align-middle">
            <label class="checkbox-inline">
            <input type="checkbox" id="status_todos" name="status_todos" value="linha">Mover</label>
        </td>
        <td class="fs-v-align-middle">
            <button type="submit" class="btn btn-default" id="btnDetalhar" name="btnDetalhar" onclick="abrirDetalhamentoPedido(this)">Detalhar</button>
        </td>
        <td>{{PEDIDO}}</td>
        <td>{{HIERARQUIA}}</td>
        <td>{{SOLICITANTE}}</td>
        <td>{{DATA}}</td>
        <td>{{COD_FORN}}</td>
        <td>{{RAZAO}}</td>
        <td>{{VALOR}}</td>
        <td>{{ORIGEM}}</td>
        <td>{{OBSERVACAO}}</td>
    </tr>
</script>

Javascript - Datatable

this.myTable = FLUIGC.datatable('#table1', {
        dataRequest: this.mydata,
        //renderContent: ['FMSG_CODIGO', 'FMSG_DATA', 'FMSG_LIDA', 'SOLICITANTE', 'FMSG_TRANSACAO', 'FQUE_MENSAGEM', 'FQUE_WORKITEM', 'FMSG_DESTINO', 'PEDIDO', 'FORNEC', 'RAZFOR', 'VALOR', 'ORIGEM', 'DESCHIER'],
        renderContent: '.template-datatable',
        header: [
                {'title': 'Mover', 'size': 'col-md-1'},
                {'title': 'Detalhar', 'size': 'col-md-1'},
                 {'title': 'Pedido', 'size': 'col-md-1'},
                 {'title': 'Hierarquia', 'size': 'col-md-2'},
                 {'title': 'Solicitante', 'size': 'col-md-2'},
                 {'title': 'Data', 'size': 'col-md-2'},
                 {'title': 'Fornecedor', 'size': 'col-md-1'},
                 {'title': 'Razao Social', 'size': 'col-md-3'},
                 {'title': 'Valor', 'size': 'col-md-1'},
                 {'title': 'Tipo', 'size': 'col-md-1'},
                 {'title': 'Observaçao', 'size': 'col-md-3'}
         ],
         selected: function(el, ev) {
             var linhaSelecionada = myTable.selectedRows()[0];
             var linha = myTable.getRow(linhaSelecionada);
         },
         scroll: {
             target: ".target",
            enabled: true
        },
    }, function(err, data) {
        if (err) {
            FLUIGC.toast({
                message: err,
                type: 'danger'
            });
        }
    });

    $('#table1').on('click', 'button', function() { 
        alert("Chegou na Funcao - click button");
        console.log($(this).index()); 
        console.log(myTable.getRow($(this).index())); 

        var linhaSelecionada = $(this).index();
        var linha = myTable.getRow(linhaSelecionada);

        alert("Pedido 01: " + linha.PEDIDO);
        detalharPedido(linha);
    });

Gostaria de ajuda para conseguir pegar o Objeto da linha certa, desse jeito ele sempre está retornando os valores do 1º registro da Tabela.

Edição:

Acrescentei a function $('#table1').on('click', 'button', function().

Quando utilizo assim, só me trás o 1º registro da tabela. Mas se mudar para: $('#table1').on('click', 'tr', function() ele me trás os valores da linha correto.

Porém, queria amarrar isso ao click do botão e não da linha como um todo, pois ainda terei que colocar um checkbox posteriormente nessa tabela.

compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

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