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（）可以使用不可见的列吗？

1 个答案: