Xpages: Search box for data table - search

Question

i have a DataTable on my Xpage. I´ve filled with JavaScript an array with elements from 4 Notes Databases, which i´ve returned to the Table to show it on the DataTable.
This works, but now i need a search (edit box with search button) to search and update the results in the DataTable.
Is this possible? I only found a solution for a datatable, which is directly bind to a view, and nothing for a "manually" filled DataTable.
This is my Datatable code , which includes the JS code to create the array
<xp:dataTable id="dataTable3" rows="990" var="coll2Test"
style="width:70%" indexVar="idx">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Group Next"
xp:key="header" id="pager8">
</xp:pager>
</xp:this.facets>
<xp:this.value><![CDATA[#{javascript:
var fa:NotesDatabase = session.getDatabase(#DbName()[0], "???????");
var faSh:NotesDatabase = session.getDatabase(#DbName()[0],"???????");
var faKb:NotesDatabase = session.getDatabase(#DbName()[0],"???????");
var fa20:NotesDatabase = session.getDatabase(#DbName()[0],"???????");
var vFa:NotesView = fa.getView("???????");
var vSh:NotesView = faSh.getView("???????");
var vKb:NotesView = faKb.getView("????????");
var v20:NotesView = fa20.getView("???????");
var doc:NotesDocument = vFa.getFirstDocument();
var docSh:NotesDocument = vSh.getFirstDocument();
var docKb:NotesDocument = vKb.getFirstDocument();
var doc20:NotesDocument = v20.getFirstDocument();
var faArr= new Array();
while(doc!= null) {
var eintrag = new Array();
eintrag.push(doc.getItemValue("Name"));
eintrag.push(doc.getItemValue("Description"));
faArr.push(eintrag)
doc = vFa.getNextDocument(doc);
}
while(docSh!= null) {
var eintrag = new Array();
eintrag.push(docSh.getItemValue("Name"));
eintrag.push(docSh.getItemValue("Description"));
faArr.push(eintrag)
docSh = vSh.getNextDocument(docSh);
}
.....
//another 2 while
...
return faArr;}]]></xp:this.value><xp:table>
<xp:tr>
<xp:td>
<xp:label
value="Suche:" id="label14"
style="font- weight:bold">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText
id="inputText7"
value="#
{viewScope.searchView6}">
</xp:inputText>
</xp:td>
<xp:td>
<xp:button value="suchen"
id="button7">
<xp:eventHandler
event="onclick"
submit="true" refreshMode="complete" immediate="false"
save="true" id="eventHandler7">
</xp:eventHandler>
</xp:button>
</xp:td>
</xp:tr>
</xp:table>
<xp:column id="column6">
<xp:this.facets>
<xp:label id="label11"
xp:key="header"
style="color:rgb(0,128,255);font-weight:bold"
value="Name">
</xp:label>
</xp:this.facets>
<xp:text escape="false"
id="computedField5">
<xp:this.value><![CDATA[#
{coll2Test[0]}]]></xp:this.value>
</xp:text>
</xp:column>
<xp:column id="column7">
<xp:this.facets>
<xp:label id="label12"
xp:key="header"
style="color:rgb(0,128,255);font-weight:bold"
value="Description">
</xp:label>
</xp:this.facets>
<xp:text escape="true" id="computedField6">
<xp:this.value><![CDATA[#
{coll2Test[1]}]]></xp:this.value>
</xp:text>
</xp:column>
</xp:dataTable>
Regards
Stefan

Answer 1

Write your completely filled JavaScript array into a view scope variable e.g. viewScope.AllEntries at the beginning. Fill your DataTable with
the complete array if no search string is entered.
the values matching search string if user entered a search string
This way you only need to read the data once from your four views and just filter it later depending on search string.
Move your code to beforePageLoad event. Add at the top
if (viewScope.AllEntries) {
return;
}
and replace the last line return faArr; with
viewScope.AllEntries = faArr;
This way you'll calculate faArr only once and store it in viewScope.AllEntries.
Replace your code in DataTable "value" with:
if (!viewScope.search) {
return viewScope.AllEntries;
}
...create and return an array (walking through viewScope.AllEntries)
...which contains only elements with search string viewScope.search
The search field can be an edit field bound to a viewScope like viewScope.search. Trigger a partial refresh of DataTable when user clicks on search button.