Filtering a List

While the list screen is useful with sorting and pagination, it would be nice to filter the number of items on a list. This tutorial provides a way of implementing this.

For this tutorial, I'll show an employee filter. To make things a bit more useful, I'll also allow the user to filter by Department. Shown below is the datamodel.



My domain classes are as follows.

class Employee {
String firstName
String lastName
Department department
static mapping = { version false }
}

class Department {
String name
String toString() {"${this.name}"}
static mapping = { version false }
}

Lets have a look at the list without filters. Notice that there are around 100 employees from different departments.

















I want to be able to filter by Department, First Name, and Last Name. I will add the code for the filters in views/employee/list.gsp. I created this file by running
grails generate-all Employee

The following snippits of code is from my edited version of list.gsp. Notice, I have added 3 new inputs fields. I have placed them above the List table. Notice I have used flash to default values. More on this later. You can see the full source here

<g:select name='department'
noSelection="['':'']"
optionKey="id"
value="${flash.department}"
from='${Department.list()}'>
</g:select>

<input type="text" id="firstName" name="firstName" value="${flash.firstName}"/>

<input type="text" id="lastName" name="lastName" value="${flash.lastName}"/>


The list screen now looks like this.
















Of course, the filtering won't actually work unless we modify the controller to change the database query. He is the list method of the EmployeeController.groovy. The key thing to note is that I'm putting the request parameter back into flash so I can have the value defaulted when the list.gsp displays.

def list = {
//keep these values so we can rerender on the filters
flash.firstName = params.firstName
flash.lastName = params.lastName
flash.department = params.department

if(!params.max) {
params.max = 10
}
def query
def criteria = Employee.createCriteria()
def results

query = {
and {
like("firstName", params.firstName + '%')
like("lastName", params.lastName + '%')

if(params.department){
def selectedDepartment = Department.get(Integer.parseInt(params.department))
eq('department', selectedDepartment )
}
}
}

results = criteria.list(params, query)

render(view:'list', model:[ employeeList: results ])

}

I also need to change my list.gsp slightly. Note, I've changed the pagination tag and the each tag. We need to pass the flash params in the paginate tag so the controller will still know what the filter criteria was when the user selects next/prev. Full source code here.

<g:each in="${employeeList}" status="i" var="employee">


<g:paginate total="${employeeList.getTotalCount()}" params="${flash}"/>


And thats it, you should now be able to filter on Department, First Name, and Last Name. I suppose this could be scaffolded. It might get a bit more complex when dealing with dates, but it is not impossible.