[SHARING] DataTables example using hold format HTMTABLE

September 24, 2014, 11:42 AM

Sarah B.

I thought I'd post this in case anyone else might find it useful. I've seen examples on the forum using a JavaScript array as the source for a DataTable, but didn't find any that directly uses the HTMTABLE hold format.

One thing I struggled with was that the html table generated by WebFOCUS didn't format the header row with thead tags, so I used some simple jQuery to incorporate those. Other than that, the implementation is pretty straightforward.

-* File: IBFS:/DEV/WFC/Repository/Common/Datatable_Car_Example.fex Created by WebFOCUS AppStudio
TABLE FILE CAR
SUM
    CAR.BODY.SALES
    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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

<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": [] });					 //initialize table with no initial order
});

</script>
</head>
<body>
<div id="datatable1">
!IBI.FIL.HTBL;
</div>
</body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: <Kathryn Henning>,