数据表按属性标题过滤，

Question

我正在使用 jQuery 数据表，并向表中添加了一些列过滤器。我通过将列 defs 设置为 html 并过滤文本来使大多数过滤器工作。

但是在一个字段上我使用了一个图标并且文本在标题属性中，我让列过滤器选择正确的文本来过滤，但过滤表格不起作用，它显示空结果。

这里有一个 js fiddle 重现问题的链接，尝试按国家/地区过滤

谢谢

https://jsfiddle.net/5qn0fovc/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
<table width="100%" class="table table-striped table-responsive-sm table-sm dtr-inline" id="site_list" role="grid"
    style="width: 100%;">
    <thead>
        <tr>
            <th>Location</th>
            <th>Country</th>
            <th>Open Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/sites/site/114/">London</a></td>
            <td><i class="flag-icon flag-icon-gb" title="United Kingdom"></i></td>
            <td>4 Feb 2020</td>
        </tr>
        <tr>
            <td><a href="/sites/site/114/">New York</a></td>
            <td><i class="flag-icon flag-icon-us" title="United States"></i></td>
            <td>10 Augb 2020</td>
        </tr>
    </tbody>
</table>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $('#site_list').DataTable( {
        "pageLength": 15,
        responsive: false,
        "dom": "<'row'<'col-6'l><'col-6'<B><'pull-right'f>>>" +
               "<'row'<'col-12'tr>>" +
               "<'row'<'col-5'i><'col-7'p>>",
        columnDefs: [ 
            {
              targets: 0,
              type: 'html'
           },
           {
              targets: 1,
              type: 'html'
           },                              
        ],
                
        initComplete: function () {
            var excluded_columns = [];
            this.api().columns().every( function () {
                var column = this;
                if(excluded_columns.indexOf(column.index()) == -1) {
                    var select = $('<br /><select class="dt-select custom-select custom-select-sm" ><option value=""></option></select>')
                        .appendTo( $(column.header()) )
                        .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 ) {
                        if(column.index() == 0){ d = $(d).text(); }
                        if(column.index() == 1){ d = $(d).attr("title"); }

                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    });
                }
            });
        },
    });
});
</script>

Answer 1

除了建议使用 data-search 属性的注释之外，您还可以根据需要的呈现类型为列返回不同的值。例如，您可以为显示返回完整的 html 字符串，但只为过滤返回标题属性值：

$(document).ready(function() {
    $('#site_list').DataTable( {
        "pageLength": 15,
        responsive: false,
        "dom": "<'row'<'col-6'l><'col-6'<B><'pull-right'f>>>" +
               "<'row'<'col-12'tr>>" +
               "<'row'<'col-5'i><'col-7'p>>",
        columnDefs: [ 
            {
              targets: 0,
              type: 'html'
           },
           {
              targets: 1,
              type: 'html',
              render: function(data, type, row) {
                if(type === "filter"){
                    return $(data).attr('title');
                }
                return data;
              }
           },                              
        ],
                
        initComplete: function () {
            var excluded_columns = [];
            this.api().columns().every( function () {
                var column = this;
                if(excluded_columns.indexOf(column.index()) == -1) {
                    var select = $('<br /><select class="dt-select custom-select custom-select-sm" ><option value=""></option></select>')
                        .appendTo( $(column.header()) )
                        .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 ) {
                        if(column.index() == 0){ d = $(d).text(); }
                        if(column.index() == 1){ d = $(d).attr("title"); }

                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    });
                }
            });
        },
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet"/>

<table width="100%" class="table table-striped table-responsive-sm table-sm dtr-inline" id="site_list" role="grid"
    style="width: 100%;">
    <thead>
        <tr>
            <th>Location</th>
            <th>Country</th>
            <th>Open Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/sites/site/114/">London</a></td>
            <td><i class="flag-icon flag-icon-gb" title="United Kingdom"></i></td>
            <td>4 Feb 2020</td>
        </tr>
        <tr>
            <td><a href="/sites/site/114/">New York</a></td>
            <td><i class="flag-icon flag-icon-us" title="United States"></i></td>
            <td>10 Aug 2020</td>
        </tr>
    </tbody>
</table>