Answers

• allan Posts: 63,481Questions: 1Answers: 10,467 Site admin

  March 2016

  I'm afraid I don't understand what you mean by "messed up" - a link to the page would be useful please. The sorting icons for the jQuery UI integration are shown in a div to be able to utilize the icons available in jQuery UI (they need an element of their own).

  You could use CSS to hide them if you don't want them, or don't use the jQuery UI / DataTables integration.

  how could I achieve the button being rendered outside of a table-sourrounding

  <

  div> tag?

  I'd really need a test case to be able to see the issue, however, you can use buttons().container() to get the container element for the buttons and insert that anywhere you want into the DOM.

  Allan
• midgetwidget Posts: 3Questions: 1Answers: 0

  March 2016 edited March 2016

  Hi Allan,

  thank you for the quick response, I was not at my desk in the mean time.
  I have no page link, unfortunately, since I'm working on a rather complex project, which doesn't allow for a standalone example without the corresponding stack and it's also not publicly deployed yet (and probably won't be in the future).

  There's the rendered HTML output example above, though, and the corresponding code. OLD is the rendered code before upgrading the DataTables plugin, NEW is the messed-up code rendered with the new DataTables plugin. Note the new sorting tags rendered mixed into the existing HTML attributes:

  <div datatables_sort_icon"=""...
  and a
  <span>
  tag, as well as the

  <

  div class="DataTables_sort_wrapper">

  tag.

  Could a wrong rendering phase order be causing this and if so, how could I work around it?

  The table I'm referring to is being pre-sorted in a fixed order by the backend code, so additional sorting features are not required here (i. e. interfere with the existing layout).
  How to avoid the sorting elements being rendered in the first place, without just making it invisible?

  I'm required to keep, update and extend the existing code, which is based on your DataTables framework. There's no problem with that, but I need to root out the problems with the rendering along with the new DataTables version.

  Btw., thanks for your hint on the buttons().container() api above, but applying it to my code will result in the error "initialOne is not defined" at the line I inserted (right after the var initialOne = $('#mainTable').dataTable({...}; definition above):

  new $.fn.dataTable.Buttons( initialOne, {
          name: 'commands',
          buttons: [
              {
                  extend: 'excel',
                  className: 'btn green btn-outline',
                  title: 'FileName',
                  exportOptions: {
                      modifier: {
                          page: 'current'
                      }
                  }
              }
          ]
      } );
       
      initialOne.buttons( 0, null ).containers().appendTo( 'body' );
  

  What am I missing? Is letter case of .dataTables of importance at this point?

  Thank you for your help!
• allan Posts: 63,481Questions: 1Answers: 10,467 Site admin

  March 2016

  I've just tried to recreate the jQuery UI destroy issue, and I can see the problem with this trivial test case: http://live.datatables.net/vugoxete/1/edit . Yes, that is something that will need to be fixed - thanks for pointing it out. Things are really busy this week, so I'm not sure I'll get a chance to look at it for a little while I'm afraid.

  Is letter case of .dataTables of importance at this point?

  Not to initialise a new instance of Buttons, but it is in the DataTable constructor if you want to access its new API. See the top FAQ.

  Allan
• midgetwidget Posts: 3Questions: 1Answers: 0

  March 2016

  Hello Allan,

  since the data exported via the HTML5 button is also affected (it contains also the strings " role="columnheader"), and I'd need the functionality as soon as possible, is there anything I can do to speed up the process?

  The generated XSLX file contains pipe separator symbols between the values in a cell, which is not, what I need.

  In addition to that, there's no css styling preserved (which I'll need in the end, too).
  I've seen some experimental stuff on that behalf here, and was about to try this, but first, I must get everything else up and running:
  https://www.datatables.net/forums/discussion/29804/table-formatting-in-export

  There're also subtle changes to the surrounding left- and righthanded table's footer and head: both are being rendered with additional rounded header bar and sorting div row code in the form:

  <thead>
  <tr role="row">
    <th class ="sorting_disabled ui-state-default" ...>
      <div class="DataTables_sort_wrapper">
        <span class="DataTables_sort_icon"></span>
      </div>
    </th>
  </tr>
  </thead>
  

  And for the mainTable in the middle, the header's styling and layout is borked, due to the incorrectly rendered tags, which, in this case, results in wrong background colors and the mentioned horizontal splitting with the table sorting row, which, of course, could be just made invisible, but I think should really be optional in the first place.

  I could ask for a support order in my department, for your development efforts, so we can probably help having that fixed - or changed - in a timely manner.

  Should I open a bug ticket for the HTML rendering issue?