![](/img/trans.png)
[英]jQuery focus the input in the next tr -> td when that td contains an input field, but never focus html select
[英]jQuery datatables - Filter by select input when input has html/images inside <td></td>
我正在尝试使用选择输入DEMO过滤我的表
我的问题是我的<table>
在<td>
内有几个图像/子画面等,我希望数据表在其中使用<span class="hidden-val">
值。
例:
<tr>
<td>
<span style="display:none" class="hidden-val">23</span>
<i class="my-sprite-abc>My Logo</i>
</td>
</tr>
我通过将字符串转换为DOM HTML然后获取innerText
来管理数据表以显示正确的选择输入值,但是我仍然在column.search.draw()
部分中苦苦挣扎,因为我不知道如何教数据表使用隐藏的跨度值。
$('#my-table').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
console.log($(this).val());
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
var html_val = $.parseHTML(d)
//console.log(html_val);
if (html_val != null){ // check if html is not null
var new_d = $(html_val)[0].innerText // take first html object <span> in this case
select.append( '<option value="'+new_d+'">'+new_d+'</option>' )
}
} );
} );
}
} );
谢谢,如果可以帮助我!
您可以创建一个基于类型的搜索插件 ,让您仅对hidden-val
过滤:
jQuery.fn.dataTable.ext.type.search.hiddenVal = function(data) {
return $('<div>').append(data).find('.hidden-val').text()
}
并将其设置为具有hidden-val
的列的type
:
...
columnDefs: [
{ type: "hiddenVal", targets: [0] } //fist column as example
],
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.