My current task right now is replacing a web page with PrimeUI/PrimeElements functionality; as we are looking for candidates to replace Richfaces & Seam. The two most important parts of this page are the Search Filter and the Datatable. In fact, it's the setup for most of our web pages.
So far I have a PrimeElements version of the table (<p-datatable>). I understand that applying column and global filters can be as easy as entering "filter : true" into their respective places, and I can easily say that it could replace our old search filter and look and function much more efficiently than before. However, it's not what I'm trying to do. What I'm trying to do is use PrimeUI & Prime Elements to make the page work (mostly) exactly like it did before.
1. Enter in the separate filters for the different columns.
2. Click a Search button that will then update the table.
So the first two filters I need are a Start Date and End Date. The old version of the filter has an inputbox and a calendar button. In other words, manually enter the date, or click the button to open the Datepicker calendar. With PrimeUi/PrimeElements, the farthest I have gotten is having a functioning datepicker. Specifically this version:
Code: Select all
<p-datepicker showOn="button"></p-datepicker>
So here is an example my code so far with just the date column involved, running in JBoss Developer Studio:
Code: Select all
<html>
<head>
<meta charset="UTF-8"/>
<title>PrimeUI example</title>
<link rel="stylesheet" href="/external/theme/theme.css"/>
<link rel="stylesheet" href="/external/jquery-ui/demo/jquery-ui-1.9.2.css"/>
<link rel="stylesheet" type="text/css" href="/external/font-awesome-4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="/external/primeui/v4.1.15/primeui.css"/>
<style type="text/css">
body,
.ui-widget {
font-family: Arial;
font-size: 13px;
}
.ui-datatable table {
table-layout: auto;
}
</style>
<script type="text/javascript" src="/external/jQuery/v2.2.1/jquery-2.2.1.js"/>
<script type="text/javascript" src="/external/jquery-ui/demo/jquery-ui.js"/>
<script type="text/javascript" src="/external/primeui/demo/primeui.js"/>
<script type="text/javascript" src="/external/x-tag/demo/x-tag-core.js"/>
<script type="text/javascript" src="/external/primeui/demo/primeelements.js"/>
<script type="text/javascript" src="/external/mustache/mustache.js"/>
<script type="text/javascript">
var localData = [
<ui:repeat var="_foo" value="#{tablefilter.resultList}">
'date': '#{_foo.transactionDate}',
},
</ui:repeat>
{}
];
</script>
</head>
<body>
<h3>Button</h3>
<p-datepicker showOn="button"></p-datepicker>
<p/>
<p-datatable caption="Syslog Results #{syslogViewFilter.getResultsHeader()}" datasource="localData" paginator="true" rows="10" selectionmode="single" onrowselect="handleRowSelect">
<p-column field="date" headertext="Date"/>
</p-datatable>
</body>
</html>