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.