时间戳

首页 > 解决方案 > 如何使用数据表在列过滤器中拆分值

javascript - 如何使用数据表在列过滤器中拆分值

问题描述

我有一个数据表，在这个表中，一个特定的列单元格有几个用逗号分隔的值的列表，默认情况下，整个单元格列表用于单个过滤器选项。但我希望一个单元格的值列表应该分成单独的过滤器选项。

我有一个看起来像这样的数据表。

<table>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>England</td>
            <td>English,Swedish,French</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>Germany</td>
            <td>German</td>
        </tr>
    </tbody>
</table>

第三列可能包含多个值，以逗号分隔(,)。

我正在使用 jQuery 插件 Datatables 为最后一列制作带有下拉过滤器的交互式表格。

这是我的代码：

initComplete: function () {
        this.api().columns(3).every( function () {
            var column = this;
            var select = $('<select class="form-control"><option value="">Select All</option></select>')
            .appendTo( $('#language').empty().append('<label>Filter by Language:</label>') )
                .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>' )
            } );
        } );
    }

我找到了这篇文章并使用下面的代码。它在表格包装器内创建过滤器，但我希望它在表格之外。这是我的实时数据表的屏幕截图在此处输入图像描述

        <script type="text/javascript" charset="utf-8">
            $(document).ready( function () {
                $('#myDatatable').dataTable( {
                    "sDom": 'W<"clear">lfrtip',
                    "oColumnFilterWidgets": {
                        "aiExclude": [ 0,1 ],
                        "sSeparator": ','
                    }
                } );
            } );
        </script>

关于如何克服这个问题的任何建议？

标签： javascriptjquerydatatables

解决方案

工作演示链接

this.api().columns(4).every( function () {
    var column = this;
    var select = $('<select class="form-control"><option value="">Select All</option></select>')
    .appendTo( $('#language').empty().append('<label>Filter by Language:</label>') )
    .on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
        );

        column
            .search( this.value )
            .draw();
    } );
    column.data().unique().sort().each( function( d, j ) {      
       var nameArr = d.split(",");
        nameArr.forEach(function(number) {                
            var optionExists = ($("#language option[value='"+number+"']").length > 0);
            if(!optionExists){
                select.append( '<option value="'+number+'">'+number+'</option>' );
            }                    
        });                     
       
    } );           
    
} );

推荐阅读