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

I don't know, man.. I fought with this all day and cannot make it work. Must be over my head

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?

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.

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.

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.

No prob. Thanks David for the link and example you shared. Didn't see that thread.

Glad you got it working now Mike. :-)

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.

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.

Thanks, I'll look at mine again. I was wondering about that x5 and x6 CSS lines in the initial messages of this thread.

Here's what ended up working for me:

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

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

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  

Thanks David Briars. This is very nice.

One note, I did have to remove the

INCLUDE=warm,$  

to get it to work.