Question

我有一个看起来像这样的HTML表。

.responsive-image-left

第三列可能包含多个值，以<table> <tbody> <tr> <td>Alice</td> <td>England</td> <td>English<br>Swedish<br>French</td> </tr> <tr> <td>Bob</td> <td>Germany</td> <td>German</td> </tr> </tbody> </table>分隔。

HTML是在PHP foreach循环内生成的。

我正在使用jQuery插件数据表来为最后一列创建带有下拉过滤器的交互式表。

这是我的代码：

<br>

如果第三列不包含多个值，那么所有方法都可以正常工作，但是如果第三列包含多个值，则这些值在下拉列表中串联在一起，并且无法按该值/这些值进行过滤。

initComplete: function () {
        this.api().columns([2]).every( function () {
            var column = this;
            var select = $('<select><option selected="true" disabled="disabled">Filter by country</option></select>')
                .appendTo( $(".dataTables_filter") )
                .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(d.length) {
                    di = d.replace("<br>", "");
                    select.append('<option value="' + di + '">' + di + '</option>')
                }
            } );
        } );
    }

关于如何解决此问题的任何建议？

Answer 1

尝试更改此代码：

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

此代码：

        column.data().unique().sort().each( function ( di, j ) {
            if(di.length) {
                let separator = '\n';
                if(di.text().indexOf(separator)==-1){
                    select.append('<option value="' + di + '">' + di + '</option>');
                } else {
                    let arrValues = di.text().split(separator);
                    for(let ix=0;ix<arrValues.length;ix++){
                        select.append('<option value="' + arrValues[ix] + '">' + arrValues[ix] + '</option>'); 
                    }
                }
            }
        } );

“ d”变量被误用为“ di”和EDIT：您必须定义分隔符。我修复了代码。

Answer 2

更改：

cancelButtonProps

到

confirm({
  cancelButtonProps: {
    onClick: () => {
      if (this.state.processing) {
        alert('You cant cancel, processing still un-going')
      } else {
        Modal.destroyAll() //use Modal.destroyAll() to destroy the confirm modal
      }
    }
  },
  onOk: () => {
    return new Promise((resolve, reject) => {
      this.setState({
        processing: true
      })
    })
  }
})

还要更改：将column.data().unique().sort().each( function ( d, j ) { if(d.length) { di = d.replace("<br>", ""); select.append('<option value="' + di + '">' + di + '</option>') } } );更改为column.data().unique().sort().each( function ( d, j ) { var optionArr = d.split("<br>"); optionArr.forEach(function(optName) { var optionExists = ($("#language option[value='"+optName+"']").length > 0); if(!optionExists){ select.append( '<option value="'+optName+'">'+optName+'</option>' ); } }); });

OR

只需使用

.search( val ? '^'+val+'$' : '', true, false )

如何使用数据表在<td>中拆分值

2 个答案: