yadcf: can exFilterColumn() work with columns which are not visible?

Question

Please refer to https://codepen.io/louking/pen/vWYqRz

When the datatables columns 5 and 6 are visible, the exFilterColumn() call filters the rows as expected, but when these are not visible (as in the codepen), the rows are not filtered.

Can exFilterColumn() be made to work with hidden columns?

javascript

var $ = jQuery;

var dtoptions = {
    dom: '<"clear">lBfrtip',
    ajax: {
           url: 'https://gist.githubusercontent.com/louking/46ef2eb188691817d26c620b1310b37d/raw/bdb7d0e4b78e6ed3e9ca218ecc2feeaa998c9fee/routes.json',
           dataSrc: 'features',
          },
    columns: [
        { data: 'geometry.properties.name' },
        { data: 'geometry.properties.distance' },
        { data: 'geometry.properties.surface' },
        { data: 'geometry.properties.gain', defaultContent: '' },
        { data: 'geometry.properties.links', orderable: false, defaultContent: '' },
        { data: 'geometry.properties.lat', visible: false },
        { data: 'geometry.properties.lng', visible: false },
    ],
    buttons: ['csv'],
}

$(document).ready(function() {
    var myTable = $("#runningroutes-table").DataTable(dtoptions);

    yadcf.init(myTable, [
          { column_number: 1, 
            filter_type: 'range_number',
            filter_container_id: 'external-filter-distance',
          },
          { column_number: 2,
            filter_container_id: 'external-filter-surface',
          },
          { column_number: 5,
            filter_type: 'range_number',
          },
          { column_number: 6,
            filter_type: 'range_number',
          },
    ]);

    var lowlat = 39.38160001551371, 
        hilat  = 39.480776692329506, 
        lowlng = -77.54829390576174, 
        hilng  = -77.2825620942383;
    yadcf.exFilterColumn(myTable, [[5, {from: lowlat, to: hilat}], [6,  {from: lowlng, to: hilng}]]);
    });

score 1 · Accepted Answer · answered Nov 03 '17 at 15:43

1

I had an epiphany.

Turns out that yadcf needs a place in the DOM to put the filter, so I needed to create a filter container in the DOM to store it. This DOM element can be styled as display: none

See the working version at https://codepen.io/louking/pen/EbKYJd

I added the following to the DOM

<div class='external-filter' style='display: none;'>
    <span id='external-filter-bounds-lat' class='filter'></span>
    <span id='external-filter-bounds-lng' class='filter'></span>
</div>

and updated the yadcf initialization as follows

{ column_number: 5,
  filter_type: 'range_number',
  filter_container_id: 'external-filter-bounds-lat',
},
{ column_number: 6,
  filter_type: 'range_number',
  filter_container_id: 'external-filter-bounds-lng',
},

answered Nov 03 '17 at 15:43

Lou K

1,128
2
12
31

"Turns out that yadcf needs a place in the DOM to put the filter" well... yup :) , another way would be to hide the columns using css (display: none) , but your way is better – Daniel Nov 05 '17 at 08:50
Appreciate the options, and appreciate the package. Hopefully someone gets something out of this. – Lou K Nov 05 '17 at 16:10
And I guess I'm a little surprised that visibile:false isn't implemented with css (display: none). Learn a new thing every day... – Lou K Nov 05 '17 at 16:15

yadcf: can exFilterColumn() work with columns which are not visible?

1 Answers1