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

yadcf：exFilterColumn() 可以处理不可见的列吗？

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

javascript

yadcf