Howto clone table row cell data span to previous adjacent cell for all rows?

studioleland

I'm copying several span containers from the table body 3rd column cell and appending it into the 2nd column of every row. I can't seem to get this to work. The table renders properly, no errors but the cloning doesn't work.

The console.log shows the row loop is running and outputting cloned content as an object?

It's a private page so I can't provide raw html.

jQuery(document).on('quick_view_pro:open_complete', function() {
  var table = jQuery('.wc-bulk-variations-table').DataTable( {
    scrollX:        true,
    scrollY:        '65vh',
    scrollCollapse: true,
    paging:         false,
    searching:      false,
    info:           false,
    ordering:       false,
    fixedColumns: {
      leftColumns: 2
    }
  });
  table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var productStyle = jQuery(this).find('td[data-dt-column="3"] span.product-style').clone();
    console.log('productstyle is: ' + productStyle);
    jQuery(this).find('td[data-dt-column="2"] .smashing-table-product-cell').append(productStyle); 
  });
});

colin

Because you're updating the DOM, DataTables would have no knowledge of it. It would be best to use columns.render to update the value of that second column.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

studioleland

Thanks for the rapid response. Created working demo space here: http://jsfiddle.net/1oaqp75j/

I can't easily change the data coming into the table so I have to manipulate with DT. Looking to clone the price and style number containers from the 3rd column to the second column for each row.

colin

Yep, so you would use columns.render as I suggested, since it allows you to manipulate the data without worrying about the source. It would be something like this:

    columnDefs: [{
        targets:2,
      render: function(data, type, row, meta) {
        if (type === 'display') {
            return data + row[3];
        }
        return data;
      }
    }]

See updated example here: http://jsfiddle.net/qbayezog/

Colin