search by clicking on grouped field

silens

I have a table grouping by a field and I would like that when clicking on the group, I will search for that value

"initComplete": function (settings, json) {
                var api = this.api();
                api.$('td').not(":nth-child(3), :nth-child(6), :nth-child(7), :nth-child(8)").click(function () {
                    api.search(this.innerHTML).draw();
                });
                },

"drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows({
                        page: 'current'
                    }).nodes();
                var last = null;
                api.column(0, {
                    page: 'current'
                }).data().each(function (group, i) {
                    if (last !== group) {
                    $(rows).eq(i).before('<tr class="group"><td colspan="6"><b>' + group + '</b></td></tr>');
                        last = group;
                    }
                });
            },

kthorngren

Your code seems to work if you click on a row within the group. Are you wanting to search by clicking on the row created with the group title?

If so maybe this example will help. I just added a data attribute to the row.
http://live.datatables.net/tovohoca/1/edit

Kevin

silens

Thanks for answering, the grouped field search gives the following error, if I search for row without grouping if it does well.
```
Uncaught TypeError: api.search(...).draw is not a function

```

silens

Hello, now he does it well, but he only does it well once, the following times he does not do it and he does not give error either.

this is my function:

function mvt_com_x_alb(idAlb,callbackFunction){ 
        
var parametros = {
        "idAlb": idAlb,
    };
    
    $.ajax({
        data: parametros,
        url: "php/AgrApp/lin_alb.php",
        type: "POST",
        
        success: function (data) {
            objJson = JSON.parse(data);
            var tablinAlb = '<table id="tbl_LinAlb" class="display responsive no-wrap" style="width:100%" ><thead><tr  HEIGHT="3">  <td  BGCOLOR="#7c979e" ><font color="white">Producto:</font></td></td><td  BGCOLOR="#7c979e" ><font color="white">Certificado:</font></td><td  BGCOLOR="#7c979e" class = "text-right"><font color="white">Bultos:</font></td><td  BGCOLOR="#7c979e" class = "text-right"><font color="white">Kilos:</font></td><td  BGCOLOR="#7c979e" class = "text-right"><font color="white">Precio:</font></td><td  BGCOLOR="#7c979e" class = "text-right"><font color="white">Importe:</font></td></tr>'
            + '</thead>' + '<tbody>';
            $.each(objJson, function (i, item) {
                tablinAlb += '<tr  style="cursor: pointer;"> <td >' + objJson[i].name + '</td><td>' + objJson[i].cert + '</td><td class = "text-right">' + objJson[i].cnt + '</td><td class = "text-right">' + objJson[i].pso_net_real + '</td> <td class = "text-right">' + objJson[i].pre + '</td> <td class = "text-right">' + objJson[i].imp + '</td></tr>';
            });
            tablinAlb += '</tbody><tfoot><tr HEIGHT="3"> <td  BGCOLOR="#7c979e" class = "text-right"></td> <td  BGCOLOR="#7c979e" ></td><td  BGCOLOR="#7c979e" class = "text-right"></td> <td  BGCOLOR="#7c979e" class = "text-right" ></td> <td  BGCOLOR="#7c979e" class = "text-right"></td><td  BGCOLOR="#7c979e" class = "text-right"></td></tr></tfoot></table>' ;
            
            callbackFunction(tablinAlb);
            
            tblLinALb=$('#tbl_LinAlb').DataTable({
                colReorder: true, //Hace que puedas reordenar los campos como quieras
                
            "columnDefs": [{
                    "visible": false,
                    "targets": 0
                }], 
        
            "order": [[0, 'asc'], [5, 'desc']],
            
            "initComplete": function (settings, json) {
                var api = this.api();
                api.$('td').click(function () {
                    api.search(this.innerHTML).draw();
                });
      
                $('.group').on('click', function () {
                  api.search($(this).data('group')).draw();
                });
                },
 
            "drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows({
                        page: 'current'
                    }).nodes();
                var last = null;
                api.column(0, {
                    page: 'current'
                }).data().each(function (group, i) {
                    if (last !== group) {
                    $(rows).eq(i).before('<tr data-group="' + group + '" class="group"><td colspan="6"><b>' + group + '</b></td></tr>');
                        last = group;
                    }
                });
            },
                
                "destroy": true,
                stateSave: true, //Guarda el estado de la tabla, orden, pagina etc
                "autoWidth": false,
                "processing": true,
                "responsive": true,
                "paging": true,
                "ordering": true,
                "info": true,
                "details": true,
                "searching": true,
                "pagingType": "simple",
            });
        
        }
    });
}   

kthorngren

I used the wrong event selector. This appears to work:
http://live.datatables.net/tovohoca/4/edit

$('table').on('click', '.group', function () {

Kevin

silens

Perfecto. Muchisimas gracias