search by clicking on grouped field

search by clicking on grouped field

silenssilens Posts: 68Questions: 27Answers: 0

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; } }); },

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 2,784Questions: 19Answers: 618

    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

  • silenssilens Posts: 68Questions: 27Answers: 0

    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

    ```

  • silenssilens Posts: 68Questions: 27Answers: 0

    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",
                });
            
            }
        });
    }   
    
    
  • kthorngrenkthorngren Posts: 2,784Questions: 19Answers: 618
    Answer ✓

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

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

    Kevin

  • silenssilens Posts: 68Questions: 27Answers: 0

    Perfecto. Muchisimas gracias

Sign In or Register to comment.