javascript - yadcf:exFilterColumn() 可以处理不可见的列吗？

Question

请引用https://codepen.io/louking/pen/vWYqRz

当数据表的第 5 列和第 6 列可见时，exFilterColumn() 调用会按预期过滤行，但当这些列不可见时(如在 codepen 中)，则不会过滤行。

exFilterColumn() 可以处理隐藏列吗？

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

Answer 1

我顿悟了。

原来yadcf需要在DOM中有一个地方放过滤器，所以我需要在DOM中创建一个过滤器容器来存放它。此 DOM 元素可以设置为 display: none

查看工作版本 https://codepen.io/louking/pen/EbKYJd

我将以下内容添加到 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>

并按如下方式更新了 yadcf 初始化

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