Coffee & Code

In a lot of my Java based web apps, I tend to make use of the wonderful Display Tag Library for rendering display tables.  It is pretty powerful and easy to do sorting, paging, decoration, etc with very little code.  I also tend to make use of jQuery as my preferred javascript library. It makes doing DOM manipulation, ajax operations, styling, etc a breeze.

jQuery’s Ajax/load request allows you load external html from a remote source and inject it into the DOM.  This means you can keep your javascript and my page layout completely separate. Combining the use of displaytag and ajax/load is a snap, and allowing the sorting & pagination to be ajax-driven rather than forcing page reloads is great.

In your jsp that renders the table (assuming you have an appropriately-scoped object called people available):

<s:url id="thisUrl"/>
<display:table class="people" id="peopleTable" name="${people}" requestURI="${thisUrl}" pagesize="5" sort="list">
  <display:column property="name" title="Name" class="name" sortable="true"/>
  <display:column property="birthday" title="Birthday" class="birthday"/>
</display:table>

And in your display page, from which you want to dynamically load this table and inject:

<script type="text/javascript">

  if (!com) var com = {};
  com.mudrick = {

    onPeopleTableLoad: function() {

      // Gets called when the data loads
      $("table#peopleTable th.sortable").each(function() {
        // Iterate over each column header containing the sortable class, so
        // we can setup overriding click handlers to load via ajax, rather than
        // allowing the browser to follow a normal link
        $(this).click(function() {
          // "this" is scoped as the sortable th element
          var link = $(this).find("a").attr("href");
          $("div#peopleData").load(link, {}, com.mudrick.onPeopleTableLoad);
          // Stop event propagation, i.e. tell browser not to follow the clicked link
          return false;
        });
      });

      $("div#peopleData .pagelinks a").each(function() {
        // Iterate over the pagination-generated links to override also
        $(this).click(function() {
          var link = $(this).attr("href");
          $("div#peopleData").load(link, {}, com.mudrick.onPeopleTableLoad);
          return false;
        });
      });
    }
  };

  $(document).ready(function() {
    // Load the initial rendering when the dom is ready.  Assuming you are injecting into a div
    // with id "peopleData" that exists in the page.
    $("div#peopleData").load("/remote/path/to/whatever/generates/table/above", {}, com.mudrick.onPeopleTableLoad);
  });

</script>

Presto! Pagination + sorting in an ajaxy way using displaytag out of the box with some simple jQuery code.

Tags: ajax, displaytag, jquery, jsp