Having to click twice after using Individual Column Filtering

bsuk

Hi, I have the same issue as described here:
http://stackoverflow.com/questions/30794672/datatables-column-filter-strange-behaviour

I was wondering if anyone knew of a neater way to handle this?
My table has some columns with hyperlinks in them, but whenever individual column filtering is used, you have to click twice in order for the URL to be followed: Once to bring the focus out of the individual column text box element, then again for the link to work.

I'm not happy with the suggested solution on the SO thread. Would it be possible to have a javascript on mouseover of a hyperlink to remove the focus from the individual column text box, or is there a neater way that anyone is aware of?

For example, when typing in the main filter, this problem does not occur.

The poster's example is valid for my point:
http://live.datatables.net/fizajopa/1/edit

To reproduce, search in an individual column, then click twice in order to get the alert action.

Many thanks.

daniel_r

I think I heard of similar issue that was casued by some third party "pre link loader" / "link loader spped up". In case you use something like that - try to disable it.

p.s you can also try my yadcf plugin for column filtering

bsuk

Thanks Daniel.
Yes, it seems to be when loading this "restore state" code:

// Restore state
                var state = table.state.loaded();
                if ( state ) {
                  table.columns().eq( 0 ).each( function ( colIdx ) {
                    var colSearch = state.columns[colIdx].search;

                    if ( colSearch.search ) {
                      $( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
                    }
                  } );

                  table.draw();
                }

I'll take a closer look at your plugin, but it might be overkill for my requirements.
Thanks again.

bsuk

OK, not quite sure how I resolved this, but here is the winning code:

// Restore state 
var state = table.state.loaded();
if ( state ) {
  table.columns().eq( 0 ).each( function ( colIdx ) {
    var colSearch = state.columns[colIdx].search;

    if ( colSearch.search ) {
      $( 'input', table.column( colIdx ).footer() ).val( colSearch.search );

    }
  } );

  table.draw();
}


// Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );