Split up table view into 3 or 4 tabed views

[Jay Webb]

Question
Is there a way to split the table view into 3 or 4 div's and have them viewable by tabs, I tried a test but got a conflict, this could be very useful for really wide tables, would be better then scrolling.

[pbottcher]

Hi,

you can try this:

Code: Select all

$j(function() {
	var type="pills";
//	var type="tabs";
	
	let setting=[
	['TITLE1', ['field1', 'field2']],
	['TITLE2',['field3'', 'field4']],
	['TITLE3',['field5', 'field6']],
	['ALL', ['field1', 'field2','field3','field4','field5','field6']]
	];
	var bar='<ul class="nav nav-'+type+'">';
	setting.forEach(item => { 
		bar=bar+'<li id="'+item[0].replace(" ","_")+'"><a ref="'+item[1].toString()+'">'+item[0]+'</a></li>';
	});
	bar=bar+'</ul>';
	$j('.table').before(bar);
	var table=AppGini.currentTableName();
    $j(this).find("li").click( function() {
		$j(this).parent().find('li').removeClass('active');
		$j(this).addClass('active');
		var keyname=table+'_tab';
		var keyvalue=$j(this).attr('id');
		localStorage.setItem(keyname, keyvalue)
		var ref=$j(this).children('a').attr('ref').split(",");
		$j('[class^="'+table+'-"]').css({"display":"none"});
		ref.forEach(item => {
			$j('[class^="'+table+'-'+item+'"]').css({"display":""});
		});
    });
	if (localStorage.getItem(table+'_tab') !== "" ){
		$j('#'+localStorage.getItem(table+'_tab')).addClass('active').click();
	}
	else
	{
		$j(".nav-"+type).find("li:first").addClass('active').click();
	}
})

The sample is using field1 to field6. You need to apply your table fields. Also you can use as many fields per TITLE as you want, just put them into the array.
Replace TITLEx by your own definition. If you dont need the complete table, remove the ALL element.

If you like the tabs more, change the comment at the beginning.