【问题标题】:How to add dropdown filter on jquery datatables plugin on single column?如何在单列上的 jquery 数据表插件上添加下拉过滤器?
【发布时间】:2017-01-24 07:21:50
【问题描述】:

我想在dataTables 上添加一个下拉过滤器,仅在单个列上。 我添加了以下代码,但它在 all 列上添加了下拉列表:

$('#dataTables-example').DataTable({
    responsive: true,
    "pageLength": 100,
    "lengthMenu": [100, 250, 500, "All"],
    initComplete: function () {
        this.api().columns().every( function () {
        var column = this;
        $('#dataTables-example .head .head_hide').html('');

        var select = $('<select id="formfilter" class="filterdropdown"><option value="">'+$(column.header()).text()+'</option></select>')
            .appendTo( $(column.header()).empty())
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
                column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
            });

        column.data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        });
    }); 
});

【问题讨论】:

  • 请花时间更仔细地格式化您的代码 - 最终结果更容易理解!一致地缩进,并且从不混合制表符和空格。

标签: jquery html datatables


【解决方案1】:

解决方案

改变

this.api().columns().every( function () {

this.api().columns(1).every( function () {

其中1 是从零开始的列索引。

注意事项

  • 要向某些列添加过滤器,请改用columns([1,3]) 格式。
  • 您需要禁用对该列的排序,因为每次单击过滤器都会对您的列进行排序。否则使用多行页眉或在页脚添加过滤器。

【讨论】:

  • 这应该可以。但是我们可以做什么,如果 url 改变并且表被重新加载。过滤器仍然显示旧数据。 $('#example').DataTable().ajax.url(newurl).load();
  • @TheAlphaGhost,我假设在这种情况下您需要重新运行initComplete 中生成过滤器的代码。
猜你喜欢
  • 1970-01-01
  • 2020-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多