CODEWITHSUNDEEP
searchdatatablexpageslotus-notes
user3126813
user3126813

Reputation: 57

Xpages: Search box for data table

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

Upvotes: 1

Views: 751

Answers (1)

Knut Herrmann
Knut Herrmann

Reputation: 30960

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.

Upvotes: 1

Related Questions