Displaytag table search using datatables jquery plugin

Add client side search (filter) functionality to displaytag generated table.

Displaytag doesn't allow us to have a table header. So, we used Rhett Sutphin’s patch which adds the support for <display:header>.

Used datatable jquery plugin to filter the data on the client side

The display tag jar that contains the latest patch can be downloaded from:

https://docs.google.com/open?id=0B66DyqXTS3gCTXpwa3kxekNCaXc

The jquery can be downloaded from:

https://docs.google.com/open?id=0B66DyqXTS3gCbVFSTE9UWUcxZjA

Include the above downloaded scripts in jsp page:

<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src=" js/jquery-1.7.1.min.js"></script>

The Display Table will be drawn like this:

<display:table name="${modelsList}" id="model" uid="models" pagesize="" style="background-color:white" decorator="subtotaler" requestURI="" cellspacing="1" cellpadding="5">

<display:setProperty name="basic.empty.showtable" value="true" />

   <display:header>

     <thead id="sModel">

      <tr>

       <th><input type="text" name="modelName" class="search_init"/></th>

<th><input type="text" name="modelDescription" class="search_init"/></th>

            </tr>

        </thead>

       </display:header>

       <display:column property="modelName" title="Quote"/>

       <display:column property="modelDescription" title="Service Model"/>

      </display:table>

For the Search on <display:header> add the following script:

<script type="text/javascript">

    var confirmed = false;

    $(function () {

        /* Search functionality */

        var oTable = $('#models').dataTable({

            "bPaginate":false,

            "bLengthChange":false,

            "bFilter":true,

            "bSort":false,

            "bInfo":false,

            "bAutoWidth":false,

            "bStateSave":false

        });

        $("thead input").keyup(function () {

            /* Filter on the column (the index) of this element */

            oTable.fnFilter(this.value, $("thead input").index(this));

        });

        $("thead input").focus(function () {

            if (this.className == "search_init") {

                this.className = "";

                this.value = "";

            }

        });

        $("thead input").blur(function (i) {

            if (this.value == "") {

                this.className = "search_init";

                this.value = asInitVals[$("thead input").index(this)];

            }

        });

    });

</script>