Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SHARING] DataTables.js add-in responsive grid options:
Go
New
Search
Notify
Tools
Reply
  
[SHARING] DataTables.js add-in responsive grid options:
 Login/Join
 
Virtuoso
posted
For those interested,

Datatables.js is a nice Js plugin library with various extensions that will allow you to make your ordinary HTML or AHTML reports better and more usable in a mobile setting.

http://datatables.net/

A few things:

I've integrated a header into the mix by adding the following line into my Js:

$("body").prepend("<b>For week ending !IBI.AMP.WKEND; !IBI.AMP.forMsg;</b>");


Not sure if this is still needed with DataTables.js only. Did the header this way due to Tablesaw.js not working with headers. Haven't tested DataTables.js only though yet. If it still throws fits, this is the solution. :-) Also, for your reports, you can have your's dynamically populate using !IBI.AMP.xxx variables if you'd like, but if not, take those out of my code example so your reports will still work.

Here is my -HTMLFORM block for implementing DataTables.js. It has Search, sorting, pagination, styling abilities, etc. all built in. Way nicer than jigsaw/sander (tablesaw) or footable.js. Better long term support and community too.


-HTMLFORM BEGIN
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/dt-1.10.11,fc-3.2.1,fh-3.1.1,r-2.0.2,se-1.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11,fc-3.2.1,fh-3.1.1,r-2.0.2,se-1.1.2/datatables.min.js"></script>

<style>
td {
line-height: .8em;
}
th, td {
white-space: nowrap;
}
td, tbody th {
vertical-align: middle;
text-align: right;
font-size: .7em;
}
table thead th, table thead td {
color: white;
font-size: .7em;
text-shadow: none;
text-align: center;
}
b {
font-size: 1.05em;
font-family: Trebuchet MS;
}
.x5 {
display:none;
}
.x6 {
display: none;
}
.dataTables_wrapper {
font-family: Trebuchet MS;
}
</style>
<script>

$("body").prepend( "<b>For week ending !IBI.AMP.WKEND; !IBI.AMP.forMsg;</b>");
$('.x1').addClass('stripe hover compact cell-border');
$('table').first().prepend('<thead></thead>');
-*$('colgroup').first().remove();
$("tr:first-child").prependTo($('thead'));

$(document).ready( function ()
{
	var iStart = new Date().getTime();
	var oTable = $('.x1').dataTable(
	{
		"scrollY": true,
		"scrollX": "300%",
		"sScrollXInner": "100%",
		"scrollCollapse": false,
-*		responsive: true,
		"lengthChange": true,
		"lengthMenu": [[5, 20, 50, 100, -1], [5, 20, 50, 100, "All"]],
		"paging": true,
		"pagingType": "full_numbers",
		"info": true,
		"pageLength": 20,
-*		"autoWidth": false,
		fixedHeader: true,
		fixedColumns: {
        	leftColumns: 3
    	},
		"ordering": true,
		"columnDefs": [
    		{ "type": "html-num-fmt", "targets": [ 0, 1, 3, 4, 5, 6, 7, 8, 9, 10 ] }
-*			{ "orderable": false, "targets": [3, 4, 5, 6, 7, 8, 9, 10 ]}
  		]
	} );
} );

</script>
-HTMLFORM END


Just plug the above block into the bottom of any of your report fexes, but inspect the page source first to see what class your table was given and your total row's and the following empty row's td tags were given and switch out any instances above of .x1 with your table class, and any instances of .x5/.x6 with your total row td tag class generated or what class the following empty row was given. The .x5 and .x6 classes are for getting rid of the extra blank row that generates at the end of your report if you choose/don't choose a total row to be included. Was having troubles with total rows in tablesaw.js so that was why this was implemented. Not sure if total rows are chill now with just datatables.js. Need to check! haha

Things to note:

You'll need to modify the columnDefs.type targets with the right number of indexes specific to your report(s) if you want sorting to work. Columns are 0 indexed.

Also, setting sScrollXInner to something larger that 100% will cause reports to crash on iOS browsers. Also, I don't have the fixed columns currently working in iOS either yet.
Additionally, to get horizontal scrolling to work on Android for reports with fixed columns, you have to use 2 fingers to scroll.

Any questions, let me know!

Insta-make any of your HTML or AHTML reports far better than they were... lol


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1111 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
Guru
posted Hide Post
I don't know, man.. I fought with this all day and cannot make it work. Must be over my head


Webfocus 8
Windows, Linux
 
Posts: 252 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Virtuoso
posted Hide Post
Before adding this to your report, did you find what class gets tied to your table tag element via inspecting the page source?

Does your report try to use a total line? If so, don't for now. Comment it out.

How many visible columns are in your report? Ensure the columnDefs.type property/option array of targets only has that many numbers specified based on how many columns, but starting with 0. Or better yet, comment that out for now.

Within your list of options, do you have commas after each option declaration?

Can you share your -HTMLFORM block with me, so I can help you troubleshoot it?


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1111 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
Guru
posted Hide Post
Hi, thanks for answering.

I'm looking at my page source, and I don't see a class getting assigned to my table. I do see x1 getting assigned to a TD tag. When I run the report I'm getting a warning about non-table initialization TD and SPAN, so I don't think I'm getting initialized properly.


Webfocus 8
Windows, Linux
 
Posts: 252 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Master
posted Hide Post
The following creates a report off of the CAR sample file in DATATABLES format:
TABLE FILE CAR
SUM
    CAR.BODY.SALES/I9C
    CAR.COMP.CAR
BY  CAR.CARREC.MODEL
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET DROPBLNKLINE ON
ON TABLE NOTOTAL
ON TABLE HOLD AS HTBL FORMAT HTMTABLE
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
 INCLUDE = IBFS:/EDA/EDASERVE/_EDAHOME/ETC/endeflt.sty,
$
TYPE=TITLE,
     COLOR='BLACK',
     BACKCOLOR='WHITE',
$
TYPE=REPORT,
     COLUMN=N3,
     SEQUENCE=1,
$
ENDSTYLE
END
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js">
	</script>
<style>
td {
line-height: .8em;
}
th, td {
white-space: nowrap;
}
td, tbody th {
vertical-align: middle;
-*text-align: right;
font-size: .7em;
}
table thead th, table thead td {
color: white;
font-size: .7em;
text-shadow: none;
text-align: center;
}
b {
font-size: 1.05em;
font-family: Trebuchet MS;
}
.x5 {
display:none;
}
.dataTables_wrapper {
font-family: Trebuchet MS;
}
</style>
-*
<script type=text/javascript charset=utf-8>
$(document).ready(function() {
	$("#datatable1 table:first-of-type").attr("id", "cars"); //assign an id to the table generated by the focexec
	$("#cars tr:first-of-type").wrap("<thead></thead>");     //dataTables requires <thead> tags around the headers
	$("#cars").dataTable({ "order": [], responsive: true }); //initialize table with no initial order
});
</script>
</head>
<body>
 <div id="datatable1">
  !IBI.FIL.HTBL;
 </div>
</body>
</html>
-HTMLFORM END 

This sample incorporates the code from the following post, as well as, some of CoolGuy's code in his previous post:
http://forums.informationbuild...7008276?r=8637018276

Thanks, as always, CoolGuy, for initiating an interesting/helpful topic.




Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2012/Tomcat Standalone Workstation: Windows 7/IE 11 Database: Oracle 12c/Netezza Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer, & ReportCaster

 
Posts: 786 | Registered: April 23, 2003Reply With QuoteReport This Post
Guru
posted Hide Post
Very nice, thanks. By the way, I figured out what I was doing wrong - I had a webfocus page heading on there that I should have removed. It was confusing the jquery I think.


Webfocus 8
Windows, Linux
 
Posts: 252 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Virtuoso
posted Hide Post
No prob. Thanks David for the link and example you shared. Didn't see that thread.

Glad you got it working now Mike. :-)


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1111 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
Guru
posted Hide Post
This works great and is a lot easier to use than "footable".

I've got one problem left - I turned on the paging option, which is great, but I realized that it's counting my column headings as a row in the count, making the record count 1 greater than it should be. Not a deal-breaker, but I can see getting questions from users about it.


Webfocus 8
Windows, Linux
 
Posts: 252 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Virtuoso
posted Hide Post
Hey Mike,

I had the same issue at one point where the paging record count was off by one. I can't remember what I did that ended up fixing it, but I think it either has something to do with the extra row it generates at the bottom of your report for some odd reason. For that, I added a CSS rule that said whatever class assigned that row to not display it.
(display: none;)

That either fixed it, or it had something to do with correct lengthMenu option params. I think those were off somehow, and that may have fixed it. If you set pageLength to something, that something has to be a value set within the lengthMenu arrays for things to work correctly.

Here's my current settings for the content I've applied this plugin to:

-HTMLFORM BEGIN
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/dt-1.10.11,fc-3.2.1,fh-3.1.1,r-2.0.2,se-1.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11,fc-3.2.1,fh-3.1.1,r-2.0.2,se-1.1.2/datatables.min.js"></script>

<style>
td {
line-height: .8em;
}
.x3:hover, .x4:hover { background-color: #ffffbb; }
th, td {
white-space: nowrap;
}
td, tbody th {
vertical-align: middle;
text-align: right;
font-size: .7em;
}
table thead th, table thead td {
color: white;
font-size: .7em;
text-shadow: none;
text-align: center;
}
b {
font-size: 1.05em;
font-family: Trebuchet MS;
}
.x5 {
display:none;
}
.x6 {
display: none;
}
.dataTables_wrapper {
font-family: Trebuchet MS;
}
</style>
<script>

$("body").prepend( "[b]For week ending !IBI.AMP.WKEND; !IBI.AMP.forMsg;[/b]");
$('.x1').addClass('stripe hover compact cell-border');
$('table').first().prepend('<thead></thead>');
-*$('colgroup').first().remove();
$("tr:first-child").prependTo($('thead'));

-*$('.dataTables_scrollBody').on('touchstart',function (e){});

$(document).ready( function ()
{
	var iStart = new Date().getTime();
	var oTable = $('.x1').dataTable(
	{
		"scrollY": true,
		"scrollX": true,
		"sScrollXInner": "100%",
		"scrollCollapse": true,
-*		responsive: true,
		"lengthChange": true,
		"lengthMenu": [[5, 20, 50, 100, -1], [5, 20, 50, 100, "All"]],
		"paging": true,
		"pagingType": "full_numbers",
		"info": true,
		"pageLength": 20,
-*		"autoWidth": false,
		fixedHeader: true,
		fixedColumns: {
        	leftColumns: 3
    	},
		"ordering": true,
		"columnDefs": [
    		{ "type": "html-num-fmt", "targets": [ 0, 1, 3, 4, 5, 6, 7, 8, 9, 10 ] }
-*			{ "orderable": false, "targets": [3, 4, 5, 6, 7, 8, 9, 10 ]}
  		]
	} );
} );

</script>
-HTMLFORM END


Everything works on my end.


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1111 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
Guru
posted Hide Post
Thanks, I'll look at mine again. I was wondering about that x5 and x6 CSS lines in the initial messages of this thread.


Webfocus 8
Windows, Linux
 
Posts: 252 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Guru
posted Hide Post
Here's what ended up working for me:

$('tr').last().remove();


Webfocus 8
Windows, Linux
 
Posts: 252 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Virtuoso
posted Hide Post
K, great! Glad you found a fix. Love your alternative solution. Should have thought of that. I was in a inspect-the-output mentality and didn't think of doing it that way at the time. haha


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1111 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
Master
posted Hide Post
Added some of Mike's and CoolGuy's recent suggestions to my 7-March sample code...
-* File datatables01.fex
TABLE FILE CAR
PRINT SALES/I9C
      CAR
BY    MODEL
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET DROPBLNKLINE ON
ON TABLE NOTOTAL
ON TABLE HOLD AS DATATABL FORMAT HTMTABLE
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
 INCLUDE = warm, $
ENDSTYLE
END
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
 <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
 </script>
 <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js">
 </script>
 <style>
  .title {
   font-size: 26px;
   text-shadow: none;
   font-weight: bold;
   text-align: center;
   font-family: Trebuchet MS;
  }
  #datatable1 {
   font-family: Trebuchet MS;
  }
 </style>
-*
 <script type=text/javascript charset=utf-8>
  $(document).ready(function() {
   $("#datatable1 table:eq(0)").attr("id", "cars");         //assign an id to the table generated by the focexec
   $('#cars tr').last().remove();                           //remove the last blank empty row.  
   $("#cars tr:eq(0)").wrap("<thead></thead>");             //dataTables requires <thead> tags around the headers
   $('#cars').dataTable({                                   //initialize the Data Table.  
    "scrollY": true,
	"scrollX": true,
	"sScrollXInner": "100%",
	"scrollCollapse": true,
	"responsive": true,
	"lengthChange": true
   });
  });
 </script>
</head>
<body>
 <div class="title">
  Sales by Model
 </div>
 <div id="datatable1">
  !IBI.FIL.DATATABL;
 </div>
</body>
</html>
-HTMLFORM END  

 
Posts: 786 | Registered: April 23, 2003Reply With QuoteReport This Post
Platinum Member
posted Hide Post
Thanks David Briars. This is very nice.

One note, I did have to remove the
INCLUDE=warm,$  

to get it to work.


WF 8.2.06
Win10 / IE11
AHTML EXL2K PDF
 
Posts: 147 | Registered: October 19, 2010Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SHARING] DataTables.js add-in responsive grid options:

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.