DataTables Column Render

Today I’ll add an actions column to the DataTable. The column will contain an edit icon that will open up a dialog displaying the row parameters for update. I’ll keep this post to a reasonable length by just displaying an alert on submit rather than connecting to the back end.

First, I’ll add support for the Font Awesome font and CSS Toolkit. This will let me display an icon as the anchor text for the new actions column.

$ git diff
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 518afbb..5639a4c 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -3,6 +3,7 @@
     <title>Jersey, Gson and DataTables</title>
 
     <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"/>

In this block of code, I add an actions column to the table definition and update the “Add User” button to call a javascript function rather than just opening the modal dialog. The switch to a javascript function will let me use the same dialog for both the “Add User” and the “Edit User” actions by initialize the dialog in the function.

@@ -26,6 +27,7 @@
                 <th>email</th>
                 <th>SurName</th>
                 <th>Given Name</th>
+                <th>Actions</th>
               </tr>
             </thead>
           </table>
@@ -35,7 +37,7 @@
         <div class="col-md-8">
           <p/>
           <p>
-            <button data-toggle="modal" href="#add-user-modal" class="btn btn-primary pull-right">Add User</button>
+            <button onclick="setUserPost()" class="btn btn-primary pull-right">Add User</button>
           </p>
         </div>
       </div>

Define an id for the dialog givenName input. This will make it easy to set the focus to the correct field when opening the dialog to edit a user.

@@ -63,7 +65,7 @@
                    <label class="col-md-3 control-label">Name</label>
                    <div class="col-md-4">
                       <label class="sr-only">Given Name</label>
-                     <input name="givenName" class="form-control" type="text" placeholder="Given Name (Mononym)"/>
+                     <input name="givenName" class="form-control" type="text" placeholder="Given Name (Mononym)" id="add-user-g
                    </div>
                    <div class="col-md-4">
                       <label class="sr-only">Surname</label>

Add a page variable to track when the user is trying to add or edit a user – this will be used to set the focus to the correct field when the modal dialog is shown.

Define the actions column for the DataTable – the column definitions are:

1. Table cannot be ordered by the Actions column
2. Searches do not run against the Actions column
3. Actions column is a link to the javascript function “setUserEdit” with the FontAwesome fa-edit icon as the text. All three user fields are passed in the function invocation.

@@ -85,13 +87,22 @@
     </div>
 
     <script type="text/javascript" class="init">
+     var modeAdd = true;
      $(document).ready(function() {
        $('#users').dataTable({
          "ajax":  "webapi/myresource/user/map",
          "columns": [
            { "data": "email" },
            { "data": "surName" },
-           { "data": "givenName" }
+           { "data": "givenName" },
+           { "data": "email",
+             "orderable": false,
+             "searchable": false,
+             "render": function(data,type,row,meta) {
+               var a = '<a onclick="setUserEdit(\''+row.email+'\',\'' + row.givenName + '\',\'' + row.surName + '\')"><i class="fa fa-edit"></i></a>
+               return a;
+             }
+           }
          ]
        });
      });

1. userEdit – a placebo function for the edit user submit action.
2. on(‘shown.bs.modal’) – this function is updated to set the focus to the correct field after the modal dialog is shown.
3. setUserEdit – a function to initialze the dialog for user edit:
   1. Initialize the dialog fields from the row values
   2. Set the email field to be readonly.
   3. Remove all previous handlers on the dialog submit button
   4. Add a new handler on the submit button
   5. Show the dialog.
4. setUserPost – a similar function to initialize the dialog for user post:
   1. Reset the form to remove any input left behind from a previous dialog cancel.
   2. Set the email field to be editable.
   3. Remove previous handlers.
   4. Add a new button handler.
   5. Show the dialog.

@@ -117,10 +128,36 @@
          }
        });
      }
+     function userEdit() {
+       alert('userEdit');
+     }
      $('button#user-post').click(userPost);
      $('#add-user-modal').on('shown.bs.modal',function(e){
-       $('#add-user-email').focus();
+       if ( modeAdd ) {
+         $('#add-user-email').focus();
+       } else {
+         $('#add-user-givenName').focus();
+       }
      });
+     function setUserEdit(email, givenName, surName ) {
+       var form = $('form#add-user')[0];
+       form.reset();
+       form.elements['email'].value = email;
+       form.elements['givenName'].value = givenName;
+       form.elements['surName'].value = surName;
+       $('#add-user-email').prop('readonly',true);
+       $('#user-post').unbind('click');
+       $('#user-post').bind('click',userEdit);
+       $('#add-user-modal').modal('show');
+     }
+     function setUserPost() {
+       $('form#add-user')[0].reset();
+       modeAdd = true;
+       $('#add-user-email').prop('readonly',false);
+       $('#user-post').unbind('click');
+       $('#user-post').bind('click',userPost);
+       $('#add-user-modal').modal('show');
+     }
     </script>
   </body>
 </html>

The current source for jersey-gson is available on github. Next time, I’ll update the back end to accept user edits and connect it to the front end.

12 Oct: Modal Dialog for Jersey, Gson and DataTables
16 Nov: DataTables ajax error handling