Question

是否可以关闭页脚中的某些下拉过滤器？这是我使用的API：https://datatables.net/examples/api/multi_filter_select.html

我不希望所有列都可以过滤。此外，是否可以将标题标签作为下拉列表中的默认值而不是空白？

以下是我的实例：http://live.datatables.net/cufawibi/3/

Answer 1

通常的方法是使用css类来过滤哪些列可以过滤。

您还可以将列名添加为选中和禁用，以便将其显示为默认值（包括禁用过滤器的所有值选项）。

    initComplete: function () {
        var api = this.api();

        api.columns('.filtersearch').indexes().flatten().each( function ( i ) {
            var column = api.column( i );
            var select = $('<select></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            select.append('<option selected disabled>"'+$(column.header()).text()+'"</option>');
            select.append('<option value="">All values</option>');              

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

更新：

为了从控制器添加类，还将表头定义更改为

<th ng-repeat="(i, th) in head" value="{{th.id}}" class="{{th.class}}"><span>{{th.name}}</span></th>

Live example（仅针对“Payload”列进行过滤，将filtersearch类添加到其他列以启用过滤）

Answer 2

我认为通过API无法实现这一目标。所以这个解决方案将是hacky。

因此，您将围绕IF块包装逻辑，以过滤掉您不想显示的列下拉过滤器。

api.columns().indexes().flatten().each(function (index) {
    var column, select;

    // You don't want to display the first and the fourth dropdown filter
    if (index !== 0 || index !== 3) {

        column = api.column(i);
        select = $('<select><option value=""></option></select>')
            .appendTo($(column.footer()).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>')
        });

    }
});

AngularJS / Bootstrap - DataTables - 关闭页脚中的某些下拉过滤器

2 个答案: