Datatables 响应式插件将 Reactstrap (Bootstraps 4) 按钮显示为对象

Question

你好，我是运行我的 React js 应用程序中的服务器端数据 table 脚本，我设法让它显示我的 reactstrap 按钮，例如所以：

"columnDefs": [
   {
     "targets": 4,
     "data": null,
     "createdCell": function (td, cellData, rowData, row, col){
       return _this.datatableButtons(td);
    }
  }
]
datatableButtons(td) {
  ReactDOM.render( 
    <ButtonGroup>
      <Button className="btn-icon btn-icon-only" color="primary" title="Edit Branch">
       <i className="pe-7s-pen btn-icon-wrapper"> </i>
      </Button>
      <Button className="btn-icon btn-icon-only" color="warning" title="Activate Branch">
       <i className="pe-7s-switch btn-icon-wrapper"> </i>
      </Button>
      <Button className="btn-icon btn-icon-only" color="danger" title="Delete Branch" onClick={() => this.deleteBranch()}>
       <i className="pe-7s-trash btn-icon-wrapper"> </i>
      </Button>
    </ButtonGroup>, td);
}

这很棒，但每当我测试它的响应视图时，它不再显示按钮，而是在所有隐藏的 table 行上显示 [object Object]。我很想知道是否有解决方案。

Answer 1

我通过添加以下代码设法解决了这个问题：

      'responsive': {
        details: {
            renderer: function ( api, rowIdx, columns ) { 
                var data = $.map( columns, function ( col, i ) {
                  if(col.columnIndex == 3) {
                    var result = '';
                    if (col.hidden) {
                      result = '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                  '<td>'+
                                    '<ul class="dtr-details">'+
                                      '<li>'+
                                        '<span class="dtr-title">'+col.title+':'+'</span>&nbsp;&nbsp;&nbsp;';

                        if($.trim(col.data.activate).toUpperCase() == 'ACTIVE')
                          result += '<label class="switch"><input type="checkbox" name="active" value="active" checked /><span class="slider"></span></label>';
                        else
                          result += '<label class="switch"><input type="checkbox" name="active" value="active" /><span class="slider"></span></label>';

                          result += '</li>'+
                                  '</ul>'+
                                '</td>'+
                              '</tr>';
                    }
                    return result;
                  }else if(col.columnIndex == 4) {
                    return col.hidden ?
                          '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<td>'+
                                '<ul class="dtr-details">'+
                                  '<li>'+
                                    '<span class="dtr-title">'+col.title+':'+'</span>&nbsp;&nbsp;&nbsp;'+
                                    '<div class="btn-group">'+
                                      '<button type="button" class="btn btn-icon btn-icon-only btn-primary" title="Edit Branch"><i class="pe-7s-pen btn-icon-wrapper"> </i></button>'+
                                      '<button type="button" class="btn btn-icon btn-icon-only btn-danger delete_branch" id="del_'+col.rowIndex+'"><i class="pe-7s-trash btn-icon-wrapper"> </i></button>'+
                                    '</div>'+
                                  '</li>'+
                                '</ul>'+
                              '</td>'+
                          '</tr>' :
                          '';
                  } else {
                    return col.hidden ?
                          '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<td>'+
                                '<ul class="dtr-details">'+
                                  '<li>'+
                                    '<span class="dtr-title">'+col.title+':'+'</span>'+
                                    '<span class="dtr-data">'+col.data+'</span>'+
                                  '</li>'+
                                '</ul>'+
                              '</td>'+
                          '</tr>' :
                          '';
                  }  
                } ).join('');

                return data ?
                    $('<table/>').append( data ) :
                    false;
            }
        }
      }

我改用原版 bootstrap

Datatables 响应式插件将 Reactstrap (Bootstraps 4) 按钮显示为对象

Datatables responsive plugin displays Reactstrap (Bootstraps 4) buttons as objects

jquery

datatables

reactjs

bootstrap-4

reactstrap