How to expand Tablepress row

1) Something like this:

/**
 * Evaluate "datatables_row_details" parameter and add corresponding JavaScript code, if needed
 */
function tablepress_add_row_details_js_command( $command, $html_id, $parameters, $table_id, $js_options ) {
	if ( ! $js_options['datatables_row_details'] )
		return $command;

	$name = str_replace( '-', '_', $html_id );
	$datatables_name = "DT_{$name}";

	$columns = $js_options['datatables_row_details_columns'];
	if ( count( $columns ) > 1 ) {
		// multiple columns case
		$row_details_output = '';
		foreach ( $columns as $column ) {
			$row_details_output .= '\'<span class="row-details-left row-details-left-column-' . $column . '">\' + headers[' . $column . '] + \': </span><span class="row-details-right row-details-right-column-' . $column . '">\' + row[' . $column . '] + \'</span>\' + ';
		}
		$row_details_output .= '""'; // for the last "+" in the JS
	} else {
		// single column case
		$row_details_output = 'row[' . $columns[0] . ']';
	}

	//if($js_options['datatables_row_details_columns_check_empty']) {
	$check_empty_details = array();
	foreach ( $columns as $column )
		$check_empty_details[] = "\$tr.children('td:nth-child({$column})').text() != ''";
	$check_empty_details = implode(' || ', $check_empty_details);
	//}

	$command = <<<JS
function {$datatables_name}_row_details(row, headers) {
	return {$row_details_output};
}
var	{$name} = $('#{$html_id}'),
	{$datatables_name},
	{$datatables_name}_titles;
	{$name}.find('thead, tfoot').find('tr').prepend( $('<th class="column-1" />') );
	{$name}.find('tbody').find('tr').each(function(index, element) {
		var \$tr = $(element);
		var details_button = '';
		if({$check_empty_details})
			details_button = '<div class="row-details-open" />';
		\$tr.prepend( $('<td class="column-1 row-details-toggle">'+details_button+'</td>') );
	});
	{$datatables_name} = {$name}.dataTable({$parameters});
	{$datatables_name}_titles = $.map({$datatables_name}.fnSettings().aoColumns, function(node) {
		var title = node.sTitle.slice(5, -6);
		if ( '?' == title )
			title = '';
		return title;
	});
	{$name}.find('tbody').on( 'click', '.row-details-toggle div', function() {
		var	row = $(this).toggleClass('row-details-open').toggleClass('row-details-close').parents('tr').toggleClass('row-details-row-open')[0];
		if ( {$datatables_name}.fnIsOpen( row ) )
			{$datatables_name}.fnClose( row );
		else
			{$datatables_name}.fnOpen( row, {$datatables_name}_row_details( {$datatables_name}.fnGetData( row ), {$datatables_name}_titles ), 'row-details' );
	} );
JS;
	return $command;
}

It should be an option in short code datatables_row_details_check_empty=true. Suggestions are right, but my variable naming not so good, not recommended to use.

Hi,

thanks for sharing this code! Hopefully, it’s useful for people who need this!

Best wishes,
Tobias

If you install that, and extend the Shortcode of the table to

I want to accomplish this as well (https://www.poorpigs.de/baseball/teamroster/saison-2013/).

I have created a table with TablePress of 7 columns and the last column contains a lot of text, so I’d love to be able to expand it as in the above example.

You write that I should copy the shortcode to replace the original shortcode, but it seems like I am not able to change the shortcode inside the table.

Hi,

thanks for your post, and sorry for the trouble.

I’m not sure what you mean. You should not change any Shortcode IN the table, but you should adjust the Shortcode on the page/post where you want the table to appear.

Regards,
Tobias

Thanks! It worked perfectly! Wonderful plugin (both TablePress and the extension). I will also donate when I can.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!
And thanks for wanting to donate, I really appreciate it!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

I usually do not have time to review but I made an exception because it’s the least I can do for such an amazing (and free) plugin! Five stars!

Hi,

thanks, I really appreciate it!

Best wishes,
Tobias