我使用 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>
答案 0 :(得分:0)
除了建议使用 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>