Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED]How to implement pagination using jquery in fex?

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED]How to implement pagination using jquery in fex?
 Login/Join
 
Durai
Gold member
posted
I need good example on how to implement pagination using jquery in fex.could any one help me to implement it?

This message has been edited. Last edited by: <Emily McAllister>,


Webfocus AppStudio 8201
Windows
 
Posts: 53 | Registered: May 09, 2016Report This Post
Mike in DeLand
Guru
posted Hide Post
Someone else on here posted a great method as a response to using responsive design on reports.
The website is datatables.net and it's pretty easy to use. I've found that using webfocus report headers or page headers will hose this up, so I did my headings in HTML toward the end instead. You'll see it there.
try this



SET EMPTYREPORT = ON
TABLE FILE CAR
PRINT *
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET BYDISPLAY ON
ON TABLE NOTOTAL
ON TABLE HOLD AS ACCTLIST FORMAT HTML
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     INCLUDE = IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENBlue_Light2.sty,
$
     SUMMARY='Cars',
     TITLETEXT='Cars',
$
TYPE=REPORT,
     LINES-PER-PAGE=UNLIMITED,
     ARGRAPHENGINE=JSCHART,
$
ENDSTYLE
END
-HTMLFORM BEGIN
< !doctype html>
<html>
<head>
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.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"/>
<style>

h1 {
    font-family: Verdana;
	font-size: 14pt;
	font-weight: bold;
	line-height: 18px;
	text-align:center;
}
h2 {
    font-family: Verdana;
	font-size: 12pt;
	line-height: 18px;
	font-weight: bold;
	text-align:center;
}
.x4 {
display:none;
}
.dataTables_wrapper {
font-family: Verdana;
}
</style>
<script>

$(document).ready( function ()
{
	$("#datatable1 table:first-of-type").attr("id", "thetable"); //assign an id to the table generated by the focexec
	$("#thetable").attr("width", "100%"); 						 //make it 100% wide
	$("#thetable tr:first-of-type").wrap("<thead></thead>");     //dataTables requires <thead> tags around the headers
	$('tr').last().remove();
	$("#thetable").dataTable({  responsive: true,
											columnDefs: [
											{ responsivePriority: 5, targets: 8 },
											{ responsivePriority: 4, targets: 4 },
											{ responsivePriority: 2, targets: 2 },
        									{ responsivePriority: 3, targets: 1 },
											{ responsivePriority: 1, targets: 0 }
    										],
											breakpoints: [
									            { name: 'desktop', width: Infinity },
            									{ name: 'tablet',  width: 800 },
            									{ name: 'fablet',  width: 768 },
            									{ name: 'phone',   width: 420 },
        									],
								paging: true,
								"lengthMenu": [ [10, 20, 25, 50, -1], [10, 20, 25, 50, "All"] ],
								info: true,
								ordering: false,
								filter: true
							}); //initialize table with no initial order
} );

</script>
</head>
<body>
<h1>Car List</h1>
<div id="datatable1">
!IBI.FIL.ACCTLIST;
</div>
</body>
-HTMLFORM END


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Francis Mariani
Expert
posted Hide Post
Nice example Mike!


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED]How to implement pagination using jquery in fex?

Copyright © 1996-2020 Information Builders