如何在数据表中显示搜索字段下拉列表?

时间:2018-12-13 10:10:07

标签: php html datatables

我正在使用数据表,也显示了多次搜索

我正在显示记录,例如

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>' )
                } );
            } );

我检查了所有内容,并且注意到如果必须在下拉菜单中显示文本,则该文本不应是悬停文本。我的意思是。我正在将鼠标悬停在动作列中显示文本。如果用户将鼠标悬停在“取消图像”图标上,那么取消文字将显示在工具提示中。这就是我遇到问题的原因...有什么办法可以解决这个问题?我的意思是悬停文字应显示在下拉菜单中?

0 个答案:

没有答案