This demo allows you to filter the data in a table.
Search:
Name | Age | Address |
---|
On each change to the filter field we either call the server function
People.getMatchingFromLargeCrowd()
to find matches, or, if
we have already found a set of matches, we filter that set if this makes
sense.
The server code simply searches the data using a RegEx.
public List<Person> getMatchingFromLargeCrowd(String filter)
{
List<Person> reply = new ArrayList<Person>();
Pattern regex = Pattern.compile(filter, Pattern.CASE_INSENSITIVE);
for (Person person : largeCrowd.values())
{
if (regex.matcher(person.getName()).find())
{
reply.add(person);
}
}
return reply;
}
Found rows are added to the page using dwr.util.addRows
:
dwr.util.addRows("peoplebody", filtered, [
function(person) { return person.name.replace(pattern, "$1"); },
function(person) { return "$" + person.age; },
function(person) { return person.address; }
], { escapeHtml:false });
We use person.name.replace
to highlight the matches.
<p>Search: <input id="filter" onkeyup="filterChanged();"/></p>
<table border="1" class="rowed grey">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody id="peoplebody">
</tbody>
</table>
Note: In order to enable JSON/JSONP you must add the following init-param to your DWR servlet definition in your web.xml (This is a snippet and is not a complete web.xml).
...
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>jsonpEnabled</param-name>
<param-value>true</param-value>
</init-param>
...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="People" scope="script">
<param name="class" value="org.getahead.dwrdemo.people.People"/>
</create>
<convert match="org.getahead.dwrdemo.people.Person" converter="bean"/>
</allow>
</dwr>