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

Question

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

我不希望所有列都可以过滤。另外，是否可以让 header 标签成为下拉列表中的默认标签而不是空白？

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

Answer 1

我认为没有一种干净的方法可以通过 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>')
        });

    }
});

Answer 2

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

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

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

更新：

为了从控制器添加 class，也将 table 头部定义更改为

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

Live example（仅对"Payload"列进行过滤，将filtersearchclass添加到其他列以启用过滤）

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

AngularJS/Bootstrap - DataTables - Turn off certain dropdown filters in footer

twitter-bootstrap

angularjs

angular-ui-bootstrap