RowGroup jquery selector for group TR

RowGroup jquery selector for group TR

barncattechbarncattech Posts: 25Questions: 4Answers: 0

I am using the RowGroup extension and it works quite well (thanks for this!). I am trying to implement a collapse expand feature that I found, and the problem I am having is getting the jquery selector for the group to trigger.

When I use the inspector in Chrome on a group row, I see something like this:

<tr data-name="01 74 10" class="dtrg-group dtrg-start dtrg-level-0">
    <td colspan="8">01 74 10 (54)</td>
</tr>

Here is one selector I have tried, that seems like it should work:

$("tr.dtrg-group td").click( function () {
    alert("click");
}); 

The way my app works is:
- the table starts out with no data
- user clicks a btn which opens a modal dialog with a multiselect list of csi codes (categories of work)
- when user selects a code, I do an ajax call to get records with that code
- I loop through this list and call add rows with row.add

It uses bootstrap. Thinking that might be interfering, I have commented it out, with no change.

So- what could cause my jquery selector to fail?

What is particularly annoying is that there is a working example, and the code is essentially like mine, but simpler. I've always felt that if I have a working example and a non-working example, I should be able to spot the difference, but so far it has eluded me.
Simple working example I found

Here is my datatables declaration:

var addtable = $('#contaddedtable').DataTable(
{
    "dom": 'Bfrtip',
    "processing": true,

    drawCallback: function( settings ) {
      $.busyLoadFull("hide");
    },

    "columnDefs": 
    [{
        targets: 0,
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox'
    }   
    ,{
        "targets": [1,2],
        "createdCell": function (td, cellData, rowData, row, col)
        {
            if ( rowData.inUse == 1 )
            {
                $(td).addClass('inUse');
            }
        }
    }]

    ,rowGroup: {
        dataSrc: ['CSI']
    ,startRender: function (rows, group) {
      var collapsed = !!collapsedGroups[group];

      rows.nodes().each(function (r) {
          r.style.display = collapsed ? 'none' : '';
      });    

      // Add category name to the <tr>. NOTE: Hardcoded colspan
      var csiString = csiAssocArr[group];
      return $('<tr/>')
          .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
    }
    }
    ,"columns": 
    [
        {
            render: function(data, type, row){
                return("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            }
        }
        ,{ "data": "inUse", "visible": false}
        ,{ "data": "Company",
            render: function(data, type, row){

                var prefClass = "";
                switch (row.Pref)
                {
                    case "1":
                        prefClass = "preferred_cont";
                        break;
                    case "2":
                        prefClass = "caution_cont";
                        break;
                    case "3":
                        prefClass = "donotuse_cont";
                        break;
                }

                return( "<span class='edit_cont " + prefClass + "' contId='" + row.ID + "'>" + data + "</span>");

            } 
        }
        ,{ "data": "CSI" }
        ,{ "data": "Pref" }
        ,{ "data": "NumInvits"} 
        ,{ "data": "Accepted",   "visible": true }
        ,{ "data": "AcceptPct" }
        ,{ "data": "DeclinePct" }
        ,{ "data": "ProposalPct" }  
        ,{ "data": "ViewedPct" }            
        ,{ "data": "AwardPct" } 
        ,{ "data": "NoRespPct" }
        ,{ "data": "NumAwards"}
        ,{ "data": "locations"}
        ,{ "data": "flags", "visible":      false}
        ,{ "data": "ID", "visible":         false}
        ,{ "data": "MD" , "visible":        false, className: "details" }
        ,{ "data": "Balt" , "visible":  false, className: "details" }
        ,{ "data": "DC" , "visible":        false, className: "details" }
        ,{ "data": "NVa" , "visible":   false, className: "details" }
        ,{ "data": "VA" , "visible":        false, className: "details" }
        ,{ "data": "DE" , "visible":        false, className: "details" }
        ,{ "data": "WV" , "visible":        false, className: "details" }
        ,{ "data": "PA" , "visible":        false, className: "details" }
        ,{ "data": "MS" , "visible":        false, className: "details" }
        ,{ "data": "Un" , "visible":        false, className: "details" }
    ]
    ,paging: false
    ,"scrollY": "500px"
    ,"scrollX":true
    ,select: {
    'style': 'multi',
    selector: 'td:first-child'
    }
    ,dom: 'Bfrtip'
    ,buttons: [
        'selectAll',
        'selectNone',
        {
            text: "Add Selected to Project",
            action: function(){
                    var selRows = addtable.rows( { selected: true } ).data();
                    var selIds = [];
                    for (var i = 0; i < selRows.length; i++)
                    {
                        selIds.push(selRows[i].ID);
                    }

                    $.ajax({        
                        type: "POST",
                        url: "scripts/addContsToProj_TEST.php",
                        data: {"projectId": projid, "selections": selIds},
                        success: function(addedIds) {
                                $('#catselect').change();
                        }
                    });
                }
        }
    ]

    ,"language": {
        search: 'Filter Displayed Contractors:',
        searchPlaceholder: 'search all fields'
    }
}); 

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    See if my comment at the end of this thread helps. If not please provide a link to your page or a test case showing the issue wo we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • barncattechbarncattech Posts: 25Questions: 4Answers: 0
    edited October 2020

    I've got it working now. I had tried your exact code for the listener, which I had gotten from the example, but it failed because I had neglected to change "table" to my table var name.
    Sometimes it helps to have somebody else weigh in. Thanks for taking the time to help!

This discussion has been closed.