selecting rows: SmartAdmin + datables

genau

Hello,

I am working with SmartAdmin seed project of React.js. There are some examples there of datatables usage, for example:
sarj-shockwave.rhcloud.com/#/tables/datatables

I would like to display my data in the table and be able to edit/delete rows. I though the easist would be to have a user select a row, then choose to edit/delete it. Unfortunately, I can't even get my table to show selected rows. This is my code:

export default class Datatable extends React.Component {
  componentDidMount() {
    System.import('script-loader!smartadmin-plugins/datatables-bundle/datatables.min.js').then(()=> {
      this.datatable(this.props.data)
    });
  }

  datatable() {
    const element = $(this.refs.table);
    let {options} = {...this.props} || {}


    let toolbar = '';
    if (options.buttons)
      toolbar += 'B';
    if (this.props.paginationLength)
      toolbar += 'l';
    if (this.props.columnsHide)
      toolbar += 'C';

    if (typeof options.ajax === 'string') {
      let url = options.ajax;
      options.ajax = {
        url: url,
        complete: function (xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
      }
    }

    options = _.extend(options, {

      "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        "sSearch": "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
        "sLengthMenu": "_MENU_"
      },
      "autoWidth": false,
      retrieve: true,
      responsive: true
    });

    const _dataTable = element.DataTable(options);

    if (this.props.filter) {
      // Apply the filter
      element.on('keyup change', 'thead th input[type=text]', function () {
        _dataTable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();
      });
    }

    element.on('click', 'tr', function () {
      var tr = $(this).closest('tr');
      var row = _dataTable.row( tr );
      
      if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
      }
      else {
        //$(table).$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
      }
      console.log($(this).attr("class"))
    });

    if (!toolbar) {
      element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
    }

    if (this.props.detailsFormat) {
      const format = this.props.detailsFormat;
      element.on('click', 'td.details-control', function () {
        const tr = $(this).closest('tr');
        const row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child(format(row.data())).show();
          tr.addClass('shown');
        }
      })
    }
  }

  render() {
    let {children, options, detailsFormat, paginationLength, ...props} = this.props;
    return (
      <table {...props} ref="table">
        {children}
      </table>
    )
  }
}

All the code was provided by SmartAdmin, apart form the onClick handler (which starts at line 57). Everytime a tr is clicked it indeed gets decorated with class selected (I checked by priniting the classes to console). Unfortunately, the effect is not visible on the webpage. Could anybody point me in the right direction?

allan

In DataTables, to allow a user to select a row, you can use the Select extension. Then all you have to do is add select: true to your table initialisation.

I can't help with the SmartAdmin aspect I'm afraid.

Allan