jQuery Tables

Introduction
This post will show you how to create rich data grids using the DataTables plugin for jQuery. DataTables is a flexible framework that allows you to create grids using a variety of data sources. This tutorial will show you how DataTables can be used with DOM and JavaScript data sources.

DOM Data Source
The simplest way to use DataTables is with a DOM data source. This approach simply 'decorates' an existing HTML table and is ideal for enhancing plain HTML tables created using template languages like JSP or Velocity.

Make Model Body Shape Engine Size (Cubic Capacity) Horse Power
BMW 320d Saloon 2000 181
BMW 330d Coupe 3000 231
BMW 335d Estate 3000 286
BMW 335i Saloon 3000 306
BMW M3 Coupe 4000 415
BMW 520d Saloon 2000 181
BMW 530d Saloon 3000 231
BMW 535d Estate 3000 286
BMW 535i Saloon 4000 306
BMW M5 Saloon 5000 508

To turn this rather dull looking HTML table into a rich data grid we simply decorate the table on document load. 
1:  <script type="text/javascript">  
2:         $(document).ready(function() {  
3:                 $('#sampleGrid').dataTable({        
4:                       "bJQueryUI": true,        
5:                       "iDisplayLength": 4,  
6:                       "sPaginationType": "full_numbers"  
7:                 });            
8:         } );  
9:   </script>  
10:  <table id="sampleGrid">  
11:       <thead>  
12:            <tr>  
13:                 <th>Make</th>  
14:                 <th>Model</th>  
15:                 <th>Body Shape</th>  
16:                 <th>Engine Size (Cubic Capacity)</th>  
17:                 <th>Horse Power</th>  
18:            </tr>  
19:       </thead>  
20:       <tbody>  
21:            <tr>  
22:                 <th>BMW</th>  
23:                 <th>320d</th>  
24:                 <th>Saloon</th>  
25:                 <th>2000</th>  
26:                 <th>181</th>  
27:            </tr>  
28:            <tr>  
29:                 <th>BMW</th>  
30:                 <th>330d</th>  
31:                 <th>Coupe</th>  
32:                 <th>3000</th>  
33:                 <th>231</th>  
34:            </tr>  
35:            <tr>  
36:                 <th>BMW</th>  
37:                 <th>335d</th>  
38:                 <th>Estate</th>  
39:                 <th>3000</th>  
40:                 <th>286</th>  
41:            </tr>  
42:            <tr>  
43:                 <th>BMW</th>  
44:                 <th>335i</th>  
45:                 <th>Saloon</th>  
46:                 <th>3000</th>  
47:                 <th>306</th>  
48:            </tr>  
49:            <tr>  
50:                 <th>BMW</th>  
51:                 <th>M3</th>  
52:                 <th>Coupe</th>  
53:                 <th>4000</th>  
54:                 <th>415</th>  
55:            </tr>  
56:            <tr>  
57:                 <th>BMW</th>  
58:                 <th>520d</th>  
59:                 <th>Saloon</th>  
60:                 <th>2000</th>  
61:                 <th>181</th>  
62:            </tr>  
63:            <tr>  
64:                 <th>BMW</th>  
65:                 <th>530d</th>  
66:                 <th>Saloon</th>  
67:                 <th>3000</th>  
68:                 <th>231</th>  
69:            </tr>  
70:            <tr>  
71:                 <th>BMW</th>  
72:                 <th>535d</th>  
73:                 <th>Estate</th>  
74:                 <th>3000</th>  
75:                 <th>286</th>  
76:            </tr>  
77:            <tr>  
78:                 <th>BMW</th>  
79:                 <th>535i</th>  
80:                 <th>Saloon</th>  
81:                 <th>4000</th>  
82:                 <th>306</th>  
83:            </tr>  
84:            <tr>  
85:                 <th>BMW</th>  
86:                 <th>M5</th>  
87:                 <th>Saloon</th>  
88:                 <th>5000</th>  
89:                 <th>415</th>  
90:            </tr>  
91:       </tbody>  
92:  </table>
Line 3 - reference the HTML table by id (#sampleGrid) and invoke the DataTables plugin.
Line 4 - apply jQueryUI theme to the grid
Line 5 - set the default number of rows for display.
Line 6 -  set up the pagination control in the footer.
Line 10 to 92 - table definition that we're decorating. Note that the id must be set so that it can be referenced by the plugin on document load)

As you can see below, the resulting data grid is a vast improvement over the plain HTML table and provides some really cool functionality out of the box.

Make Model Body Shape Engine Size (Cubic Capacity) Horse Power
BMW 320d Saloon 2000 181
BMW 330d Coupe 3000 231
BMW 335d Estate 3000 286
BMW 335i Saloon 3000 306
BMW M3 Coupe 4000 415
BMW 520d Saloon 2000 181
BMW 530d Saloon 3000 231
BMW 535d Estate 3000 286
BMW 535i Saloon 4000 306
BMW M5 Saloon 5000 415

JavaScript Array Data Source
DataTables can also be used to create grids declaratively by passing the data as a JavaScript array. This is pretty flexible as it allows you to take data from any source, convert it to a JavaScript array and populate the grid. For example, you might take data keyed by the user or from the server side  and convert it to a JavaScript array, before passing it to the grid. In the sample code below I've hard coded an array of values.
1:  <table id="sampleGridJavaScriptDataSource">  
2:  </table>  
3:  <script type="text/javascript">  
4:         $(document).ready(function() {  
5:                 var someData = [                           
6:                                  [ "Colm", "Toale", "12/04/1981", "Male", "Engineer" ],  
7:                                  [ "Gary", "Gallagher", "12/04/1981", "Male", "Project Manager" ],  
8:                                  [ "Gary", "Jonston", "18/01/1979", "Male", "Doctor" ],  
9:                                  [ "Riain", "McAtamney", "02/07/1985", "Male", "Managing Consultant" ],  
10:                                 [ "Gareth", "Burnside", "07/01/1979", "Male", "Lorry Driver" ],  
11:                                 [ "Connor", "Smyth", "11/03/1986", "Male", "Bank Manager" ],  
12:                                 [ "John", "Flemming", "19/07/1976", "Male", "Accountant" ],  
13:                                 [ "Claire", "Jones", "21/11/1980", "Male", "HR Manager" ],  
14:                                 [ "Sarah", "Nolan", "10/08/1972", "Female", "Receptionist" ],  
15:                                 [ "Steve", "Scott", "27/08/1984", "Male", "Taxi Driver" ]  
16:                               ]  
17:                 $('#sampleGridJavaScriptDataSource').dataTable( {  
18:                      "bJQueryUI": true,        
19:                      "iDisplayLength": 4,  
20:                      "sPaginationType": "full_numbers",  
21:                      "aaData": someData,  
22:                      "aoColumns": [  
23:                           { "sTitle": "Forename" },  
24:                           { "sTitle": "Surname" },  
25:                           { "sTitle": "Date Of Birth" },  
26:                           { "sTitle": "Gender" },  
27:                           { "sTitle": "Occupation" }                           
28:                      ]  
29:                 } );       
30:            } );  
31:  </script>
Line 1 - Simple HTML table definition with id attribute set
Line 5 to 16 - Hard coded array of values used to populate the grid. In a real application this data would come from another source (user interface, server side etc.)
Line 17 - Define the grid by applying the DataTables plugin to the table skeleton we defined on line 1
Line 18 to 20 - This is the same basic configuration that we applied to our first grid. See DOM data source above.
Line 21 - Pass JavaScript array as data source. In our case this data is hard coded but in a real application it could come from any source.
Line 22 to 27 - Column definitions for the grid. Note that these were not required in the earlier example because we were using an existing HTML table as our data source

Comments

  1. Gary Johnston7 April 2014 at 02:53

    Short, simple and concise. Thanks!

    ReplyDelete
  2. Base Zap27 July 2015 at 03:06

    This is an excellent blog because it has good volume of information, everything is described in the simplest manner and all information on this blog is genuine and real..best web hosting | web hosting sites

    ReplyDelete

Post a Comment

Popular posts from this blog

Spring Web Services Tutorial

Image
Update
I've recently written a more up to date version of this post which describes how to build a contract first web service using Apache CXF. Check it out here.

Introduction
Modern enterprise applications are rarely stand alone and often rely on data and services provided by external systems. In order for different types of systems to communicate there must be a  communication protocol of some sort, a standard way of sending and receiving messages in a format that is recognised and supported by all major platforms. SOAP (Simple Object Application Protocol) is such a protocol, and allows applications to communicate by exchanging messages in a standard XML format.
SOAP Web Services provide a platform agnostic integration mechanism that allows disparate systems to exchange data regardless of the platform they are running on. For example, SOAP web services are commonly used to integrate .NET applications with applications running on the Java platform. Almost all modern platforms and …
Read more

REST Endpoint Testing With MockMvc

In this post I'm going to show you how to test a Spring MVC Rest endpoint without deploying your application to a server. In the past, full integration tests were the only meaningful way to test a Spring REST endpoint. This involved spinning up a test server like Tomcat or Jetty, deploying the application, calling the test endpoint, running some assertions and then terminating the server. While this is an effective way to test an endpoint, it isn't particularly fast. We're forced to wait while the entire application is stood up, just to test a single endpoint.
An alternative approach is to unit test by manually instantiating the Controller and mocking out any required dependencies.  While such a test will run much faster than a full integration test, its of limited value. The problem is that by manually instantiating the Controller we're bypassing Springs Dispatcher Servlet, and as a result missing out on core features like
request URL mapping request deserialization re…
Read more

An Introduction to Wiremock

This post provides a brief introduction to Wiremock, showing how it can be used to to quickly and easily mock remote API calls. We'll use Wiremock to write some integration tests for a simple Dropwizard app and show you how it can be put to use in a real world scenario.

Why would I need to mock external API calls? There are a number of scenarios where it makes sense to mock an external API rather than call a live service.
The external API may still be in development and not yet available for integration. In this instance as long as a data contract has been defined (e.g. Swagger spec, WSDL), the remote API can be stubbed based on the data contract. Stubbed endpoints allows a team to continue development even when external APIs isn't fully implemented.You may have little or no control over the external API uptime in development or test.  As a result you cannot guarantee it will be available to call when running integration tests. In this instance it makes sense to use mocked respo…
Read more

Spring Batch Tutorial

Image
Introduction Spring batch is a lightweight framework that provides a solid foundation on which to build robust and scalable batch applications. It provides developers with a set of tried and tested patterns that solve common batch problems and allows developers to focus more on the business requirement and less on complex batch infrastructure. Spring batch contains a variety of out of the box configurable components that can be used to satisfy many of the most common batch use cases. Extensive XML configuration and an extensible programming model mean that these components can be customised and used as building blocks to quickly deliver common batch functionality.
This tutorial will show you how to build a very simple batch application to read fixed length data from a flat file and write it to a database table. This is a common batch use case and should be sufficient to demonstrate some of the fundamental concepts of Spring batch and provide you with a foundation on which to build mor…
Read more

Externalising Spring Configuration

Enterprise applications typically contain a number of  properties and  runtime resources that must be configured before the application is deployed. Property and resource values can either be baked into the artefact at build time using something like Maven Profiles or derived at runtime using Spring Profiles. My preferred approach is to externalise all configuration so that the artefact taken from the build server is environment agnostic and can be deployed onto any environment . For example, we could take a WAR file from our build server and  deploy it to our development, UAT or production environments without changing any configuration in the WAR file itself.

Spring Property Configuration Spring applications use the PropertyPlaceholderConfigurer to load application properties. Property files are typically loaded from the class path but the example below uses a slightly different approach, loading the properties file from a directory outside of the application itself. This allows the…
Read more

Docker & Spring Boot

Docker allows you to package an application with its dependencies, into a light weight, portable container that can run on almost any environment.  You can think of a Docker container as a run time, a mini virtual machine that encapsulates your application and its dependencies.
In order to run a container you need a Docker image. An image is like a template that defines everything that will exist within the container. You can almost think of an container as a run time instance of the image it was created from. In this post we'll define and build 3 slightly different Docker images that run a simple Java app.

Installing Docker If you haven't already done so you'll need to install Docker. The official documentation is pretty good so following it step by step should see you up and running in about 15 minutes.
I've installed Docker on Windows and Ubuntu but to be honest I prefer running it on Ubuntu and have found it a bit more reliable than with Docker Toolbox on Windows.��…
Read more

Health Checks, Metrics & More with Spring Boot Actuator

Image
I've been working with Spring Boot for a few years now and I'm a big fan. There are lots of things to like about Spring Boot, but one thing that really stands out for me is the emphasis on production readiness.
Production Readiness Production readiness is about looking beyond functional requirements and ensuring your application can be properly managed and monitored in production. Some key things to consider when thinking about production readiness are...
Health checksViewing application configuration - application properties, Environment variables etc. Viewing and altering log configurationViewing application metrics - JVM, classloader, threading and garbage collection. Audibility of key application events Spring provides all of this functionality out of the box via Spring Boot Actuator, a sub project of Spring Boot. A range of RESTful management and monitoring endpoints are provided so you don't have to implement these features each time you build an application. To enable…
Read more

Axis2 Web Service Client Tutorial

Image
Introduction
Axis2 is a Java framework that provides comprehensive support for exposing and consuming web services. This short post will look at its SOAP client support and how it can be used to get a simple web service client up and running.
For convenience I'm going to be calling a web service that I recently built as part of another blog post.  If you don't already have a web service to call you can grab the full source code for my sample service from github. Simply run a Maven build and deploy the WAR to your Servlet container.

What is a Web Service Client
This post doesn't attempt to explain the detailed inner workings of a web service client, but its still pretty useful to have an idea of what's going on under the hood. Most web service clients provide the following
A client side proxy for the remote service we want to call, that allows our application to invoke a SOAP service using a simple method call. The proxy insulates our application from the intricacies of s…
Read more