Display sum of column instead of counting rows in search pane

Display sum of column instead of counting rows in search pane

Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

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.

Replies

  • allanallan Posts: 56,210Questions: 1Answers: 8,902 Site admin

    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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0
    edited April 11

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

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    @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?

  • allanallan Posts: 56,210Questions: 1Answers: 8,902 Site admin

    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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    @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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

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

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    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?

  • colincolin Posts: 14,303Questions: 1Answers: 2,431

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

    Colin

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    @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.

  • colincolin Posts: 14,303Questions: 1Answers: 2,431

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

    Colin

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

Sign In or Register to comment.