我正在使用数据表,也显示了多次搜索。
我正在显示记录,例如
Selectsearch 1 | Selectsearch 2 // this is the select dropdown for filter
id | Name | Mobile | Email | Action
1 | abc | 1234567887 | abc@gmail.com | cancel image icon
2 | qwe | 1234563423 | zxc@gmail.com | new image icon
选择搜索1用于电子邮件搜索,选择搜索2用于操作列。
电子邮件搜索运行正常,因为我得到了正确的下拉列表,例如
abc@gmail.com
zxc@gmail.com
但是动作搜索不起作用,因为我没有得到正确的下拉列表。我进入了类似
的下拉列表cancel">cancel
new">new
我的动作代码就像
if($row->status == 1){
$action='<a href="javascript:void(0);" class="s_icon_set tooltip_ cancel"><img src="'.base_url('/assets/images/icons/cancel.png').'"><span class="tooltiptext_">Cancel</span></a>';
}
else{
$action='<a href="javascript:void(0);" class="s_icon_set tooltip_ cancel"><img src="'.base_url('/assets/images/icons/cancel.png').'"><span class="tooltiptext_">new</span></a>';
}
下面是带有搜索的数据表代码
$('#report_list').DataTable({
initComplete: function () {
this.api().columns("4").every( function () {
var column = this;
var select = $('<select><option value="">All</option></select>')
.appendTo( $("#status_menu_placeholder").empty() )
.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>' )
} );
} );
this.api().columns("5").every( function () {
var column = this;
var select = $('<select><option value="">All</option></select>')
.appendTo( $("#select_filter_emp").empty() )
.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>' )
} );
} );
我检查了所有内容,并且注意到如果必须在下拉菜单中显示文本,则该文本不应是悬停文本。我的意思是。我正在将鼠标悬停在动作列中显示文本。如果用户将鼠标悬停在“取消图像”图标上,那么取消文字将显示在工具提示中。这就是我遇到问题的原因...有什么办法可以解决这个问题?我的意思是悬停文字应显示在下拉菜单中?