Tuesday, 9 April 2013

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

2 comments:

  1. Short, simple and concise. Thanks!

    ReplyDelete
  2. 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