Answers

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  April 2022

  Here is a running example of responsive.details.renderer. The docs show the columns parameter has the column's className. If I understand what you want - I would loop through all the hidden columns and build an object that has the key being the className and the value is an array of the columns with that className. Then loop through the object to build the HTML output grouping the like columns.

  If you still need help with this please provide a starter test case with an example of what you have.

  Kevin
• rf1234 Posts: 2,809Questions: 85Answers: 406

  April 2022

  I saw that example, Kevin. I thought someone had something better already ...So I will have to handcraft this ...

  Roland
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  April 2022 Answer ✓

  Had a few minutes and built this example showing what I was suggesting:
  http://live.datatables.net/filedihi/1/edit

  Kevin
• rf1234 Posts: 2,809Questions: 85Answers: 406

  April 2022

  Thanks a lot, Kevin!
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2022 Answer ✓

  Clever!

  Here is one more possibility if everything is already in the sequence you want - this time using CSS: http://live.datatables.net/filedihi/3/edit .

  Allan
• rf1234 Posts: 2,809Questions: 85Answers: 406

  April 2022 edited April 2022

  Guys,

  thanks a lot for your support!!!

  I chose a different solution because I had a practical problem.
  In your examples columns.data has about 6 lines of code. After duplication for the "min-tablets" it is 12 lines.

  My columns.data has 372 lines of code - and that isn't all of the code: Many of the renderers are wrapped in functions. I didn't want to duplicate all of that for sure. It would have probably also caused performance issues. I didn't exaggerate too much when I spoke about one trillion columns in my post above ...

  I integrated the group headers into my solution for hiding empty child row fields. And now it is working:

  table
      .on( 'responsive-display', function ( e, dt, row, show, update ) {
          if ( colSearchPage ) {
              return;
          }
          var x = row.index();
          
          var grpClassNames = ["bs",  "ap", "ex", "bs_ev", "us", "dc"];
          var grpHeaders = ["Basis Informationen", "Antrag", "Ausführung", "Basistermine", "Verwendung", "Dokumentation"];
          var currentGrpClass = ""; var grpHeader; var grpClass;
          
          //loop through all list items of the child row field list of the table row
          $('tbody tr.child td.child ul li[data-dt-row="' + x + '"]').each(function(){
              //remove empty child row fields / columns
              if ( $(this).find('.dtr-data').text() <= "" ) {
                  $(this).addClass("hidden");
              } else {
                  $(this).removeClass("hidden");
              }
              //add group headings for remaining visible child row fields / columns
              grpClass = "";
              $.each(this.classList, function(key, value){
                  if ( value === "hidden" ) { //columns with "hidden" in the classlist are ignored
                      grpClass = ""
                      return false;
                  }
                  if ( grpClassNames.indexOf(value) >= 0 ) {
                      grpClass = value;
                  }
              })
              if ( grpClass > "" && grpClass !== currentGrpClass ) {
                  grpHeader = grpHeaders[grpClassNames.indexOf(grpClass)];
                  $(this).prepend('<li class="groupHeader" style="font-size: 18px; \n\
                               padding-bottom: 12px;"><span class="bg-info">'
                               + grpHeader + '</span><li>');
                  currentGrpClass = grpClass;                
              }
          })
      })
  

  It looks nice enough I think:
  

  @allan ... and here is my bug report:

  Unfortunately I encountered an issue in columnDefs:
  I use columnDefs to assign classes to the tds of the columns based on the classes of the ths.

  The problem is if a column has multiple classes and is selected by multiple "targets" selectors only the "className" classes of the first target selector are assigned! I think this is a bug because it limits flexibility to a great extent.

  Below are my columnDefs that assign "className". The last six of them are used to assign the grouping classes used above based on the th class name in my HTML. So If a column (th) is a "noSelectCol" AND a "base" col (has both classes) this falls apart: The tds of that column will only get assigned the first "classname".And that is "noSelect". As a work around I split "noSelectCols" in "noSelectColsBase" and "noSelectColsDocs" to make sure these columns get both required class names and not only the first. You can see 4 more targets that required to assign additional "bs" and "dc" classes because otherwise they wouldn't have gotten them based on classes "base" and "docs" of the th elements.

  I would be very grateful if this could be fixed asap. In 2 weeks time I will no longer understand my own code below and will think it is a bug, too

  columnDefs: [
     // targets may be classes 
      {   targets: "noSelectColsBase", className: "noSelect bs" },
      {   targets: "noSelectColsDocs", className: "noSelect dc" },
      {   targets: "noSelectCols", className: "noSelect" },
      {   targets: "cnt", className: "text-center dc" },
      {   targets: "labels_name", className: "labelColCell bs" },
      {   targets: "eventsCol", className: "evCol bs" },
      {   targets: "categoriesCol", className: "catCo bs" },
      {   targets: "base", className: "bs" },
      {   targets: "appl", className: "ap" },
      {   targets: "exec", className: "ex" },
      {   targets: "base-events", className: "bs_ev" },
      {   targets: "usage", className: "us" },
      {   targets: "docs", className: "dc" }
  ],
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2022 Answer ✓

  Yup I think that is a sensible change. It is a bit awkward due to how the classes are handled - basically this is the only property that has that combine action rather than just overwrite from a previous definition (e.g. setting searchable to different values would just take the last one).

  I've fixed it here and it will be in the nightly soon.

  Allan
• rf1234 Posts: 2,809Questions: 85Answers: 406

  April 2022

  Thanks, Allan.