Replies

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  April 2022

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

  April 2022 edited April 2022

  @allan The page is now located at https://themeadow.se/ntjperrors.
• Rawland_Hustle Posts: 94Questions: 16Answers: 0

  April 2022

  @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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  April 2022

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

  April 2022

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

  April 2022

  @allan I'm almost there now but why do the HTML get parsed in some of the rows in the (first) pane?
• Rawland_Hustle Posts: 94Questions: 16Answers: 0

  April 2022

  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 Posts: 15,240Questions: 1Answers: 2,599

  April 2022

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

  Colin
• Rawland_Hustle Posts: 94Questions: 16Answers: 0

  April 2022

  @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 Posts: 15,240Questions: 1Answers: 2,599

  April 2022

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

  Colin
• sandy Posts: 913Questions: 0Answers: 236

  April 2022

  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