Display sum of column instead of counting rows in search pane

Rawland_Hustle

Link to test case: http://themeadow.se/ntjperrors/
Debugger code (debug.datatables.net):
Error messages shown: No error messages shown.
Description of problem:
How can I have the counters within the search panels sum by row 11, rather than counting the rows?

I have tried to implement the solution given here but I can't get it to work.

allan

Per one of your other threads, I'm not able to see the data in the table, so I can't really diagnose the issue at the moment I'm afraid.

That said, the method Colin suggested is rather a workaround - it isn't intended that the countered in SearchPanes should be anything other than simple counters.

Allan

Rawland_Hustle

@allan The page is now located at https://themeadow.se/ntjperrors.

Rawland_Hustle

@colin Could you please help me out here, I really want the search panes to sum on row 11. How would I implement your solution in my case?

allan

I'm not actually seeing where you've integrated Colin's example code on your page?

Colin is on holiday at the moment btw .

Allan

Rawland_Hustle

@allan I had removed it but I've added it again. I don't know what controls what in his code so I've just copy/pasted it. It does nothing on my page.

Rawland_Hustle

@allan I'm almost there now but why do the HTML get parsed in some of the rows in the (first) pane?

Rawland_Hustle

Oh, I think I know why. Because some of the rows in my search pane are shortened and then there's no match in v.ServiceConsumerDescription === data. How do I target the original data here?

colin

Could you update the test case to reflect that, please, then we can debug it,

Colin

Rawland_Hustle

@colin If you visit https://themeadow.se/ntjperrors/ you can se in the first search pane that for example row 6 is "broken". That's because of this part of the code:

        {
          "targets": "ServiceConsumerDescription",
          "searchPanes": {
            "dtOpts": {
              "columnDefs": [{
                "targets": [0],
                "render": function(data, type, row, meta) { 
                  var total = 0;
                  var f = table.rows().data().filter(function(v,i) {
                    if ( v.ServiceConsumerDescription === data) {
                      total += parseInt(v.FailedRequests);
                    }
                  });

                  var pill = '<span  class="dtsp-pill">' + total + '</span>';

                   return '<div class="dtsp-nameCont"><span title="' + data + '" class="dtsp-name">' + data + '</span>' + pill + '</div>';              

                }
              }]
            }
          }
        }

The html get's broken when there's no match between v.ServiceConsumerDescription and data. There's no match sometimes because data is shortened in this part of the code:

    {
            "targets": ["ServiceConsumerDescription", "LogicalAddressDescription", "ServiceProducerDescription"],
            "width": "15%",
            "render": function (d, type, row) {

              if (type === "display" ) {
                  if (d === null || d.length < 45) {
                      return d;
                  }
                  let shortened = d.substr(0, 44);
                  return '<span class="ellipsis" title="' + d + '">' + shortened + '&#8230;</span>';
               }
               return d;
            }
        }

Full code is here: https://themeadow.se/ntjperrors/main.js.

colin

Thanks for that explanation. We'll take a look and report back, probably this Friday,

Colin

sandy

Hi @Rawland_Hustle ,

Can you not just detect the presence of your edit and then perform the same operation on the data point and compare those two? Something like...

{
  "targets": "ServiceConsumerDescription",
  "searchPanes": {
    "dtOpts": {
      "columnDefs": [{
        "targets": [0],
        "render": function(data, type, row, meta) {
          var total = 0;
          var f = table.rows().data().filter(function(v,i) {
            let comparison = v.ServiceConsumerDescription;
            if (v.ServiceConsumerDescription !== null && v.ServiceConsumerDescription.length >= 45) {
              let shortened = v.ServiceConsumerDescription.substr(0, 44);
              comparison = '<span class="ellipsis" title="' + v.ServiceConsumerDescription + '">' + shortened + '&#8230;</span>';
            }

            if (comparison === data) {
                  total += parseInt(v.FailedRequests);
            }
          });
 
          var pill = '<span  class="dtsp-pill">' + total + '</span>';
 
           return '<div class="dtsp-nameCont"><span title="' + data + '" class="dtsp-name">' + data + '</span>' + pill + '</div>';             
 
        }
      }]
    }
  }
}

Thanks,
Sandy