Table viewer using JQuery plugin and JEE

DataTables is a JQuery plugin, facilitating building Ajax table editors. In this example, I show how to connect it to JEE backend, which is a simple Servlet. Backend exposes a table, stored as a Java List within Servlet instance. Data is served back in JSON format using Jackson library.

Example is deployed on Google App Engine, datatablesjee.appspot.com. Code is available on GitHub github.com/rafalrusin/datatablesjee.

First, we need to instantiate DataTables plugin within a html page. This is extremely easy, by using code below:

	$(document).ready(function() {
	$('#example').dataTable( {
	"bProcessing": true,
	"bServerSide": true,
	"bPaginate": true,
	"sAjaxSource": "datatablesjee"
	} );
	} );

view raw instantiate.js hosted with ❤ by GitHub

AjaxSource parameter refers to Servlet URI, which handles requests for data. ServerSide argument is set to true, which means that backend will do sorting, filtering and pagination. This allows us to use large tables (>1000 rows) without performance problems on client side.

Now, we need to implement backend. Servlet requires a doGet method, which needs to retrieve parameters sent from client as an Ajax request. Those parameters describe search keyword, starting row and page size of a table.

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	int iDisplayStart = Integer.parseInt(request.getParameter("iDisplayStart"));
	int iDisplayLength = Integer.parseInt(request.getParameter("iDisplayLength"));
	String sSearch = request.getParameter("sSearch");
	final int iSortCol_0 = Integer.parseInt(request.getParameter("iSortCol_0"));
	final boolean sSortDir_0 = request.getParameter("sSortDir_0").equals("asc");

view raw init.java hosted with ❤ by GitHub

Then, we need to do filtering and sorting. I used a simple toString + contains methods on a single row in order to do filtering. Sorting is done via custom comparator, which sorts by given column number. Following code does the job:

	private boolean filter(String sSearch, List<Object> list) {
	if (sSearch.equals("")) {
	return true;
	}
	return list.toString().contains(sSearch);
	}
	...
	List<List<Object>> filteredList = new ArrayList<List<Object>>();
	for (int i = 0; i < myList.size(); i++) {
	if (filter(sSearch, myList.get(i))) {
	filteredList.add(myList.get(i));
	}
	}
	Collections.sort(filteredList, new Comparator<List<Object>>() {
	@Override
	public int compare(List<Object> o1, List<Object> o2) {
	if (sSortDir_0) {
	return o1.get(iSortCol_0).toString().compareTo(o2.get(iSortCol_0).toString());
	} else {
	return o2.get(iSortCol_0).toString().compareTo(o1.get(iSortCol_0).toString());
	}
	}
	});
	List<List<Object>> selectedList = new ArrayList<List<Object>>();
	for (int i = iDisplayStart; i < iDisplayStart + iDisplayLength; i++) {
	if (i < filteredList.size()) {
	if (filter(sSearch, filteredList.get(i))) {
	selectedList.add(filteredList.get(i));
	}
	}
	}

view raw filtering.java hosted with ❤ by GitHub

Last, we need to send JSON response back to client. Here, we use Jackson, which is a very convenient library for manipulating JSON in Java.

	ObjectMapper mapper = new ObjectMapper();
	result.put("iTotalRecords", myList.size());
	result.put("iTotalDisplayRecords", filteredList.size());
	result.put("aaData", selectedList);
	mapper.writeValue(response.getOutputStream(), result);

view raw result.java hosted with ❤ by GitHub

iTotalRecords is total number of records, without filtering. iTotalDisplayRecords is number of records after applying filter. aaData is two dimensional array of strings, representing visible table data.

Summing up, I like the idea of Ajax in this form, because client side is not rendered directly by backend (no jsp, etc.). This makes it a detached view, which could be served as static content, from Apache Web Server for example, which is very performant.