jhyland87 / datatables-hide-empty-columns Goto Github PK

There is significant lag on a tables with 5000+ rows and 30 or so columns. So I propose couple of optimisations.
First, break loop on first non empty column found as there is no point to check rest of columns as result is already predetermined:
for (var i = info.start; i < info.end; i++)
 if (_isEmpty(data[i]))
 empty++
 else
 break;

Second, which brings most benefit - is to disable "redraw" upon each column setting visible or not:
if (empty === (info.end - info.start)) { api.column(this.index()).visible(false, false) } else { api.column(this.index()).visible(true, false) }

after calling _checkPage() do api.draw();

Feature request:
It would be great if autohide would have option to autohide based on what is visible on a page, not just check if column is empty for whole page:

https://datatables.net/reference/option/paging

There is another interesting issue with filtering and paging:

var data = this.data().toArray() - gets ALL columns (for example 239).

But when filtering is done, page.info is set to:
{"page":0,"pages":1,"start":0,"end":8,"length":20,"recordsTotal":239,"recordsDisplay":8,"serverSide":false}

Idea is that
// Only loop through the rows that are visible, using the page info for (var i = info.start; i < info.end; i++) { if ($.trim(data[i]) === '') empty++ }
loops just via FIRST 8 rows, but NOT the ones which are actually SHOWN on the screen.

Hey, you have made same bug I had ;)

Here is demo - "Age" on last page remains unhidden because of:

if (empty === info.length) api.column(this.index()).visible(false) else api.column(this.index()).visible(true)

where info.length doesn't mean that there will be same amount of rows as page could have.
Thats why I have used (info.end - info.start)

Hello,

When dataTables runs the hideEmptyColums.js the code keeps breaking at line 257: Uncaught TypeError: api.columns(...).every is not a function. Anything I can do I my end?

line 145: perPage = _cfgItem( 'perPage'), //is undefined with no second parameter.

Thanks,

Mark

I don't see any entry point that could be used to manually trigger this feature by the user. That would be useful.

Hello,
As this project seems a little bit dead, but I am using this plugin daily - I am going register it to bower repository (my fork).

If stateSave is enabled when page is refreshed and different data is shown in table, it doesn't unhide previously hidden columns. E.g.

There are columns A, B and C. C column is empty.

New query is performed page is refreshed and column C now longer empty, however it remains hidden.

in the function _checkColumns there is this line https://github.com/jhyland87/DataTables-Hide-Empty-Columns/blob/master/dataTables.hideEmptyColumns.js#L274 used to retrieve the data:
var data = this.data().toArray();

you should probably use something like that
var data = api.column( this.index(), {search:'applied', order:'applied', filter: 'applied'} ).data();

http://www.linuxdigest.org/misc/script_examples/DataTables-Hide-Empty-Columns/examples/

The above results in a 403 Forbidden for me :'(

Hiya,
I found that if I had already hidden a column with other logic, then the plugin made them visible.

So to ignore the columns I had already hidden, I modified the following

	if( api.column( this.index()  ).visible() === true) {
            api.column( this.index() ).visible( isVis )
			}

Might be useful for someone else if it was set up as an option

Just found this and I've been trying to make this work with my table that get its data using AJAX.
It appears to hide the columns when they're empty but the columns don't come back if I navigate back to a page where they're not empty.
For the columns to show again I have to refresh the page.

I've copied the bit from the example for perPage the only difference seems to be that I'm loading the data with AJAX instead of it already being on the page.

Is there something I could have missed?

Here's how I've created the table if it's any help:

    $(document).ready(function () {
        var oTable = $('#e-table').dataTable({
            columns: [
                {title: "Name"},
                {title: "Serial Number"},
                // Some more columns generated by PHP
            ],
            serverSide: true,
            "bInfo": false,
            "bLengthChange": false,
            "pageLength": 15,
            "oLanguage": {
            "sZeroRecords": "Nothing to display",
                    "sSearch": ""
            },
            hideEmptyCols: {
                columns: <?php echo $columnsToHide; ?>,
                perPage: true
            },
            "ajax": '/ajax_table/'
        });
    });

The data returned from /ajax_table/ is just as the dataTables spec says it should be.

It works, but takes a while. Has anyone figured out how to make it quicker?