Data Grid with Pagination using jqGrid
The current contact list view is fine if only a few contacts exist in the system. However, as the data grows
to thousands and even more records, performance will become a problem.
A common solution is to implement a data grid component, with pagination support, for data
browsing so that the user just browses a certain number of records, which avoids a large amount of data
transfer between the browser and the web container. In this section, we will demonstrate the
data grid component. The version we are using is 4.3.1.
For the pagination support, we will use jqGrid's built-in Ajax pagination support, which fires an
XMLHttpRequest for each page and accepts JSON data format for page data. So, we need to add the JSON
library dependency into our project, as shown in Table 17-6.
Table 17-6. Maven Dependencies for JSON
Group ID
Artifact ID
Version
Description
1.9.2
Jackson JSON processor to support
org.codehaus.jackson
jackson-mapper-lgpl
data in JSON format
In the following sections, we will discuss how to implement the pagination support on both the
server and client sides. First, we will cover implementing the jqGrid component in the contact list view.
Then, we will discuss how to implement pagination on the server side by using Spring Data Commons
module's comprehensive pagination support.
Enable jqGrid in the Contact List View
To enable jqGrid in our views, first we need to include the required JavaScript and style sheet files in the
template page (default.jspx). Listing 17-45 shows the code snippet required.
Listing 17-45. Add jqGrid to Page Template
<!-- Other code omitted -->
<!-- CKEditor -->
<spring:url value="/resources/ckeditor/ckeditor.js" var="ckeditor_url" />
<spring:url value="/resources/ckeditor/adapters/jquery.js" var="ckeditor_jquery_url" />
<script type="text/javascript" src="${ckeditor_url}"><jsp:text/></script>
<script type="text/javascript" src="${ckeditor_jquery_url}"><jsp:text/></script>
<!-- jqGrid -->
<spring:url value="/resources/jqgrid/css/ui.jqgrid.css" var="jqgrid_css" />
<spring:url value="/resources/jqgrid/js/i18n/grid.locale-en.js"
var="jqgrid_locale_url" />
<spring:url value="/resources/jqgrid/js/jquery.jqGrid.min.js" var="jqgrid_url" />
<link rel="stylesheet" type="text/css" media="screen" href="${jqgrid_css}" />
<script type="text/javascript" src="${jqgrid_locale_url}"> <jsp:text/></script>
Search WWH :
