DataTables migration destroys HTML

DataTables migration destroys HTML

midgetwidgetmidgetwidget Posts: 3Questions: 1Answers: 0

Well hello,

I'm trying to migrate from jQuery 1.10.2 / jQuery-UI 1.10.4 / jQuery-dataDables 1.9.4 to the latest dataTables, to be able to use the export buttons plugin. I've already ramped-up the underlying jsf framework, to support jQuery 1.12 and jQuery-UI 1.11.4, in order to make use of your latest DataTables version, without jQuery version conflicts.

Everything seems to work with the new jQuery libs, except for a few layout changes. But when swapping the jQuery-dataTables.js for your new version (1.10.11), the table's column head HTML tags get messed up by some automatically injected code:

OLD:

<th class="sorting_disabled adblue" tabindex="0" rowspan="1" colspan="1" style="width: 71px;" aria-label="K|92_K_0">
    <div role="columnheader" identifier="92_K_0" style="cursor:pointer;width:44px; padding: 0 4px 0 0;text-align:right;">
     K
    </div>
</th>

NEW:

<th class="sorting_disabled adblue ui-state-default" rowspan="1" colspan="1" aria-label="K|92_K_0" style="width: 168px;">
    <div datatables_sort_icon"="" identifier="92_K_0<span class=" style="cursor:pointer;width:44px; padding: 0 4px 0 0;text-align:right;"></div>
    " role="columnheader">
    <div class="DataTables_sort_wrapper">
     K
    </div>
</th>

The table initialization is done like this (button test code commented out):

var mainTableV = true;
var initialOne = $('#mainTable').dataTable({
  'aaData': aDataSet,
  'aoColumns': oColumns,
  'bDestroy':true,
  'bProcessing': false,
  'bJQueryUI': false,
  'bSortable': false,
  'bFilter': false,
//    'buttons': true,
//     dom: 'Bfrtip',
//        buttons: [
//            {
//                extend: 'excel',
//              className: 'btn green btn-outline',
//                title: 'FileName',
//              exportOptions: {
//                  modifier: {
//                      page: 'current'
//                  }
//              }
//            }
//        ], 
  'bInfo': false,
  'bPaginate': false,
  'aaSorting': [],
  'fnRowCallback': function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if (mainTableV)  {
        vRowCallback(nRow, iDisplayIndex);            
      } 
      else {
        cRowCallback(nRow, iDisplayIndex);  
      }
  },
  'fnHeaderCallback': function( nHead, aData, iStart, iEnd, aiDisplay ) {
      $('th',nHead).addClass('adblue');
      $('th',nHead).each(function () {
        var thString = $(this).html();
        var arrContent = thString.split('|');
        $(this).empty();
        $('<div style="cursor:pointer;width:44px; padding: 0 4px 0 0;text-align:right;" identifier="'+arrContent[1]+'" role="columnheader">'+arrContent[0]+'</div>').appendTo($(this));
      });          
  },
  'fnInitComplete': function(oSettings, json) {
    $('#loader').hide();
  }
});

Does anybody have an idea, why that happens, and how to avoid it?

Also, how could the rendering of those new sorting tags be disabled (they obviously use up additional space)?

And lastly, if I activate the button code, the rendered Button will 'push down' the whole table plus header - how could I achieve the button being rendered outside of a table-sourrounding <div> tag?

Any help is appreciated!

Answers

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

    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

  • midgetwidgetmidgetwidget Posts: 3Questions: 1Answers: 0
    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!

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

    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

  • midgetwidgetmidgetwidget Posts: 3Questions: 1Answers: 0

    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?

This discussion has been closed.