Need to update old code about responsive

lenamtl

I need to update this function to work with newest Datatables version.
I don't know why it's no longuer work, any clue ?

function responsiveToggle(dt) {
            $(dt.table().header()).find('th').toggleClass('all');
            dt.responsive.rebuild();
            dt.responsive.recalc();
        }

kthorngren

What doesn't work?

Can you build a test case to show the problem?

Kevin

lenamtl

Go to https://jsfiddle.net/lenamtl/o8se63fw/

Resize the table so you can see name, office and tools columns then export CSV or Copy. It will export only the visible (from responsive view) columns, not all visible columns from the table.

So I need to export visible column even if they are toggled but I don't want to export real hidden columns.

lenamtl

So to fix that in Datatables 1.10.11 (my fix was working perfectly with this version)

I added this in jquery.dataTables.js just before the function( factory )

function responsiveToggle(dt) {
  $(dt.table().header()).find('th').toggleClass('all');
       dt.responsive.rebuild();
       dt.responsive.recalc();
   } 

lenamtl2

Hi,
I tried to reply to this question using lenamtl account and now I'm banned, I don't know why could you fix that thanks

lenamtl2

Then i'm using the code like this

extend: 'csvHtml5',
        text: 'csv',
          titleAttr: 'csv',
            title: 'contacts',
              exportOptions: {
                columns: [':visible:not(.not-export-col):not(.hidden)'],
              },
               action: function(e, dt, button, config) {
                  responsiveToggle(dt);
                  $.fn.DataTable.ext.buttons.csvHtml5.action(e, dt, button, config);
                  responsiveToggle(dt);
                } 

lenamtl

then I use it like this

         {
            extend: 'excelHtml5',
            text: 'excel',
            titleAttr: 'excel',
            title: 'contacts',
            exportOptions: {
                 columns: [':visible:not(.not-export-col):not(.hidden)'],
                                                               },
                 action: function(e, dt, button, config) {
                     responsiveToggle(dt);
                     $.fn.DataTable.ext.buttons.excelHtml5.action(e, dt, button, config);
                     responsiveToggle(dt);
                 } 
                      
           }, 

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You can't use :visible for what you want since Responsive has its column's hidden - i.e. not visible.

However, what you can do is make use of the fact that columns can be given as a function to test if you want the column to be included or not - e.g.:

  columns: function (idx, data, th) {
    if ($(th).hasClass('not-export-col')) {
        return false;
    }
    
    return table1.column(idx).visible();
  },

https://jsfiddle.net/7z6nsgxo/

Allan

lenamtl

Hi @Allan,

This seem to work if I use this, I also need to not export hidden columns

{
    extend: 'copyHtml5',
      text: 'copy',
        titleAttr: 'copy',
          title: 'contacts',
            exportOptions: {
              columns: function (idx, data, th) {
                if ($(th).hasClass('not-export-col')) {
                return false;
            }

         if ($(th).hasClass('hidden')) {
                return false;
        }

                return table1.column(idx).visible();
              },
   },

lenamtl

Can you explain why the function I was using does not work anymore?
refer to my question code function responsiveToggle(dt)

colin

Probably just a change between versions broke something. Glad it's working now.

Colin