Answers

• legends Posts: 16Questions: 5Answers: 0

  February 2017

  Here is reproduction of the problem: jsbin.com/dezuga/edit?html,js,output
• legends Posts: 16Questions: 5Answers: 0

  February 2017 edited February 2017

  SOLVED
  If you take a look at this example https://datatables.net/extensions/responsive/examples/child-rows/column-control.html

  you can see that the details type is set to column. The example also shows, that the plus sign has it's own column. But when I set it to column, the plus sign is part of the first data column.
  When I change the details type to inline, I get what I want, a separate column with a plus sign.

  Is this a bug in your demo or a bug in the naming?
  Because when I hear "inline" , I would not think of a separate column...
• tangerine Posts: 3,365Questions: 39Answers: 395

  February 2017

  The documentation is pretty clear.
  https://datatables.net/reference/option/responsive.details.type
• legends Posts: 16Questions: 5Answers: 0

  February 2017 edited February 2017

  It's clear, but in my case it works the opposite way:

  inline - where the first column in the table has additional padding added to it and the :before pseudo element is used to display the button.

  and column:

  column - where a whole column is dedicated to the show / hide control.

  In my case inline creates a new column for the button. And "column" does what "inline" should do!!!

  Here is a repro: jsbin.com/dezuga/edit?html,js,output

  As you can see,... column does it inline...

  Thanks, for reading ;-)
• allan Posts: 63,160Questions: 1Answers: 10,406 Site admin

  February 2017 Answer ✓

  If you want to use the column type, you need to give a column that is can use - i.e. insert an empty column: http://jsbin.com/yanugatopa/edit?html,js,output .

  In the example you give it is still using the first column, but the first column has data in it, hence why it looks nasty!

  Allan
• legends Posts: 16Questions: 5Answers: 0

  February 2017 edited February 2017

  I just took a look at my repro and yes you are right inline stays inline.
  Adding a new column does the "trick".
  Should stop working after 12h, thanks allan!

  One issue I have regarding your jsBin example, when the page width goes below for example 400px (tested on latest chrome,desktop) the contact header stays visible, while the data for this header is not displayed anymore, any suggestions what I can do?
• allan Posts: 63,160Questions: 1Answers: 10,406 Site admin

  February 2017

  Unfortunately, Responsive doesn't currently play nicely with complex headers. I'm afraid that's a limitation in the current release software and one I plan to address in future.

  Allan
• legends Posts: 16Questions: 5Answers: 0

  February 2017 edited February 2017

  I created a hot-fix for this.
  While this works on my page where I have different types of datatables, it is not tested, means no unit tests exist. Cannot assure that it has no side effects.

  It's not perfect, but it looks good on my S3 and LG v10.
  This patch will keep the headers on screens which are more narrow then the S3 screen:
  jsbin.com/dezuga/8/edit?html,js,output

  _setColumnVis: function (col, showHide) {
      var dt = this.s.dt;
      var display = showHide ? '' : 'none'; // empty string will remove the attr
  
      $(dt.column(col).header()).css('display', display);
      $(dt.column(col).footer()).css('display', display);
      dt.column(col).nodes().to$().css('display', display);
  
      var parentrow = $(dt.column(col).header()).parent().prev("tr");
  
      var visibleSiblingCount = $(dt.column(col).header()).siblings("th").filter(function (idx, el) {
          return $(el).is(":visible");
      }).length;
  
      if (parentrow.length > 0 && visibleSiblingCount != 1) {
  
          if (parentrow.find("th:nth-child(" + col + ")").attr("rowspan") == 1) {
              parentrow.find("th:nth-child(" + col + ")").css('display', display);
          } else {
              parentrow.find("th:nth-child(" + (col + 1) + ")").css('display', display);
          }
  
      }
  },
  
• allan Posts: 63,160Questions: 1Answers: 10,406 Site admin

  February 2017

  Nice one thanks!

  My current plan is to improve the complex header support in DataTables core so it can be used by the extensions such as Buttons and Responsive via an API (which is yet to be defined).

  That looks like a nice workaround for now .

  Allan