CODEWITHSUNDEEP
javascriptyadcf
Lou K
Lou K

Reputation: 1138

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

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}]]);
    });

Upvotes: 1

Views: 364

Answers (1)

Lou K
Lou K

Reputation: 1138

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',
},

Upvotes: 1

Related Questions