td.details-control open an other table

erickmt

I created a column td.details-control to show a to show something like a log in other table but i don't how to get td's id and filter the table by it. When I click on td.details-control shows all the table's values.

js
$('#cliente').on( 'click', 'td.details-control', function () {
document.getElementById('historico').style.display='block';

} );

var table = $('#venda').DataTable( {
    dom: 'Bfrtip',
    ajax: 'controller/controller_historico.php',
    columns: [
        {
            "data": "cliente.nome"
        },
        {
            "data": "vendedor.nome"
        },
        {
            "data": "venda.dta_venda"
        },
        {
            "data": "venda.valor_total_pago"
        },
        {
            "data": "venda.valor_total_liquido"
        }
    ],
    select: true,
    buttons: [
    ]
   }
} );

html

Histórico de compras do cliente

Cliente	Vendedor	Data da Compra	Valor Total Pago	Valor Líquido

erickmt

It compiled my html but it's a modal that shows the datatable #venda

allan

Can you link to a test case showing the issue please?

Allan

erickmt

Hi Allan, this is my test. I tried to do something that you could understand because i am using a local bank.
I would like that the new datatable shows the datas from an other bank table but from the same person a clicked.

http://live.datatables.net/yorojuye/1/

allan

You are using a DOM0 event handler:

document.getElementById('menu').style.display='block'

I would suggest you remove that and replace it with a jQuery delegate event handler:

$('#venda').on( 'click', 'tbody button', function () {
  var rowData = table.row( $(this).closest('tr') ).data();

  ... do something with rowData
} );

Allan

erickmt

I've made some changes and I would like to use the firt colum of the rowdata (tr) in this field, like that:

$('#cliente').on('click', 'td.details-control', function () {
        var rowData = table.row( $(this).closest('tr') ).data();

       table
          .columns(0)
          .search(rowData[0])
          .draw();
        
       document.getElementById('historico').style.display='block';
    } );

erickmt

Thats what I needed

$('#cliente').on( 'click', 'td.details-control', function () {

                var cell = table.cell( this, 0 ).data();
        var cliente_selecionado = table.cell( this, 1 ).data();

        table1
            .search(cell + ' - ' + cliente_selecionado)
            .columns(0)
            .draw();
                alert(cell);
            document.getElementById('historico').style.display='block';
    } );