Step:1:
Create relation between table header and table data
<td class="t-Report-cell" rel="#COLUMN_HEADER_NAME#" #ALIGNMENT# headers="#COLUMN_HEADER_NAME#">#COLUMN_VALUE#</td>
Step:2:
Normal View
Functionality: Show / Hide required columns on-click
Order the Columns accordingly,
1.Create Button with dynamic action as Execute Javascript Code,
2. For Example, If you have 25 columns, Arrange first 6 as your main visible columns
and so that you can form a loop and hide after 6, Use following Jquery inside your loop
var a = $('.t-Report-report').find("td:eq("+i+")").attr("rel");
$('.t-Report-report').find("th:eq("+i+"), td:eq("+i+")").hide();
$('td[rel='+a+']').hide();
i Represents the nth column of <table>
.t-Report-report Class of the report
.find Finds the selector specified in braces
td:eq("+i+") equals (eq) nth(i) table data(td)
.attr("rel") Finds attribute rel
.hide() Hides the selector
Step:3:
Full View
Functionality: Show / Hide required columns on-click
1.Create Button with dynamic action as Execute Javascript Code,
2. After main columns we should show remaining columns so that here loop starts with last column of Normal View. Include following Jquery in loop,
var a = $('.t-Report-report').find("td:eq("+i+")").attr("rel");
$('.t-Report-report').find("th:eq("+i+"), td:eq("+i+")").show();
$('td[rel='+a+']').show();
i Represents the nth column of <table>
.t-Report-report Class of the report
.find Finds the selector specified in braces
td:eq("+i+") equals (eq) nth(i) table data(td)
.attr("rel") Finds attribute rel
.hide() Hides the selector
Output : Normal View
Notice Buttons , Above is in Normal View. So, Full View button is displayed
Output : Full View
Notice Buttons , Above is in Full View. So, Normal View button is displayed
No comments:
Post a Comment