数据表按属性标题进行筛选

Question

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

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

这里有一个链接到一个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

除了建议使用数据搜索属性的注释之外，您还可以根据所需的渲染类型为列返回不同的值。例如，您可以为显示返回完整的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>