如何在数据表中的按钮名称上添加选择过滤器

如何解决如何在数据表中的按钮名称上添加选择过滤器

如何在按钮名称上添加选择过滤器？当前，过滤器正在显示，但显示的值不正确，无法正常工作。请在下面查看我的代码。

  $('#example').DataTable( {
        initComplete: function () {
            this.api().columns([1,2,4).every( function () {
            var column = this;
            var select = $('<select style="width:100%;"><option value=""></option></select>')
              .appendTo( $('thead tr:eq(0) td').eq( this.index() ) )
              .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>' );
          } );
        } ); 
            
        }
        
    
    } );

表

<tr>
      <td>12</td>
      <td>John</td>
      <td>28/12/2020</td>
      <td style="padding-top: 20px;">
            <button type="button" class="btn " data-toggle="modal" data-target="#modal">
            BUTTONNAME <img src="" />
            </button>
           
        </td>

        </tr>

     <tr>
      <td>13</td>
      <td>Jane</td>
      <td>28/01/2019</td>
      <td style="padding-top: 20px;">
            <button type="button" class="btn " data-toggle="modal" data-target="#modal">
            BTNNAME <img src="" />
            </button>
           
        </td>

        </tr>

我想在btn名称（即BUTTONNAME，BTNNAME）上添加选择过滤器。 任何帮助将不胜感激。

解决方法

所以，这一行：

column.data().unique().sort().each( function ( d,j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' );
          } );

当console.log（d）出现在下面时：

"<button type=\"button\" class=\"btn \" data-toggle=\"modal\" data-target=\"#modal\">
                BTNNAME <img src=\"\">
            </button>"

您可以做的是使用jquery $(text of element here,{html: true})将此文本转换为元素，html：true用于将<转换为<等。

完成后，您需要检查元素是否为按钮，如果是，则将按钮的文本传递给选项。

现在，您的选择问题解决了。

您的下一个问题是过滤或更改选择的值时。

在当前代码上，当用户更改select的值时，它将扫描该列并检查EXACT单元格的值。

这与您的按钮不起作用，因为它是一个元素。您可以做的是检查单元格文本的一部分。因此，不要使用正则表达式'^'+val+'$'，而只需将值本身用作搜索参数。

请参见以下代码：

$('#example').DataTable({
  initComplete: function () {
    this.api().columns([1,2,3]).every(function () {
      var column = this;
      var select = $('<select style="width:100%;"><option value=""></option></select>')
      .appendTo($('thead tr:eq(0) th').eq(this.index()))
      .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) {
        console.log(d);
        var cellElement = $(d,{ html: true });
        if(cellElement.is("button")){
            var buttonName = cellElement.text().trim();
            select.append('<option value="' + buttonName + '">' + buttonName + '</option>');
        }
        else {
            select.append('<option value="' + d + '">' + d + '</option>');
          }
      });
    });
  }
});

在这里拨弄：https://jsfiddle.net/tzyqsajc/30/