Load table after CSS - Google Usability Issues

Paul624

Hello,

I am using a table with several hidden columns.

The problem is these hidden columns initially display for a split second which is telling Google the table is too wide for the page. As a result, Google is telling me I have usability issues with this page.

I suspect the issue is the table is loading before the scrollbar CSS kicks in.

Is there a way to delay the loading of the table (so the CSS kicks in first) or to make all columns invisible by default and select certain columns to be visible (ie the opposite of the code below)? Or another method?

Apologies if I haven't made the issue completely clear, I'm an amateur when it comes to this!

Below is the Javascript I'm using:

var key = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQg_Cl38YmGXezWC2eGjQD8LGscWaVjbnV78xyV47YOShbNuvMs8Wp39BLebfjVP3VBHXNMVegMKorL/pub?output=csv";
        var columns = [{"data": "Name"}, {"data": "Club"}, {"data": "Position"}, {"data": "Price"}, {"data": "Pick"}, {"data": "Points"}, {"data": "PPM"}, {"data": "GW"}, {"data": "LT1", "visible": false}, {"data": "LT2", "visible": false}, {"data": "LT5", "visible": false}, {"data": "LT10", "visible": false}, {"data": "LT15", "visible": false}];

        $(document).ready(function() {
            function init() {
                Papa.parse(key, {
                download: true,
                header: true,
                complete: setupTable
                });
            }
            init();
            function setupTable(result) {
                var data = result.data;
                var table = $('#diff').DataTable( {
                    "data": data,
                    "columns": columns,
                    "order": [[5, "desc"]],
                    "autoWidth": false,
                    initComplete: function () {
                        this.api().columns().every( function () {
                            col_idx = this[0][0];
                            if (col_idx != 1 && col_idx != 2) {
                                return;
                            }
                            var column = this;
                            if (col_idx == 3) {
                                var input = $('<input type="text" id="ownership" name="ownership"></input>').appendTo( $(column.footer()). empty() );
                                return;
                            }
                            var select = $('<select><option value=""></option></select>')
                                .appendTo( $(column.footer()).empty() )
                                .on( 'change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
            
                                    column
                                        .search( val ? '^'+val+'$' : '', true, false )
                                        .draw();
                                } );
            
                            column.data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' );
                            } );
                        } );
                    },
                } );
                $('#ownership').keyup( function() {
                    table.draw();
                });
            }
            $.fn.dataTable.ext.search.push(
                function( settings, data, dataIndex ) {
                    var ownership = parseFloat( data[3] ) || 0; // use data for the age column
                    var val = parseInt($('#ownership').val(), 10);                    
                    if ( isNaN(val) || ownership <= val)
                    {
                        return true;
                    }
                    return false;
                }
            );
        } );
 function selectionHandler(index) {
            var table = $('#diff').DataTable();
            // Removes the existing filter
            table.search('').columns().search('').draw();
            var colIdx = index + 8;
            // Re-filter on new column
            var filteredData = table
                .column( colIdx )
                .search("TRUE")
                .draw();
        }

kthorngren

Can you set the desired columns as hidden with CSS in the HTML thead? This way they are hidden before Datatables start initializing.

Kevin

Paul624

Honestly, I don't think I'd know how to do this.

Does datatables have an option where you can delay loading the table or even make all columns invisible by default and then make them appear manually (opposite of the code above)?

kthorngren

Let's take a. step back to make sure I understand the issue.

The problem is these hidden columns initially display for a split second which is telling Google the table is too wide for the page.

You have a table with a thead defined in HTML. This is rendered and displayed. Its not shown in your code but you have something fetching the data. Then setupTable() is called with the fetched which is used by data to initialize the Datatable. What you are seeing is the origin HTML table is shown until the time Datatbles initializes displays the data and hides the columns.

While typing this I realized that you might be able to use columns.title to define the column headers and remove the thead you have defined in HTML. This might eliminate the initial wide table.

Kevin