jQuery Sorting Plugin

xxAction()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
pubilc void xxAction(){
  String orderBy = request.getParameter("orderBy");
  System.out.println("orderBy " + orderBy);

  String sql = "select x.a, x.b from xx";

  if (orderBy != null && orderBy.length() > 0) {
    sql += " order by "
        + fieldSort.getSortBy()
        + (fieldSort.getAsc().equals(Boolean.TRUE) ? " asc"
            : " desc");
  } else {
    orderBy = "xx";
    sql += " order by " + orderBy;

    request.setAttribute("sortBy", orderBy);
    request.setAttribute("order", "up");
    fieldSort.setAsc(Boolean.TRUE);
    fieldSort.setSortBy(orderBy);
  }
}

FieldSort.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import java.io.Serializable;

import javax.servlet.http.HttpServletRequest;

public class FieldSort implements Serializable {

  private static final long serialVersionUID = 5877056172946099482L;
  private String sortBy;
  private Boolean asc;

  private FieldSort() {

  }

  public String getSortBy() {
    return sortBy;
  }

  public void setSortBy(String sortBy) {
    this.sortBy = sortBy;
  }

  public Boolean getAsc() {
    return asc;
  }

  public void setAsc(Boolean asc) {
    this.asc = asc;
  }

  public static FieldSort createSorting(HttpServletRequest request,
      String orderBy, String className) {
    String orderKey = className + "lastFieldSort";
    Object lastFieldSort = request.getSession().getAttribute(orderKey);
    FieldSort fieldSort = null;

    if (lastFieldSort == null) {
      fieldSort = new FieldSort();
      fieldSort.setSortBy(orderBy);
      fieldSort.setAsc(Boolean.TRUE);
    } else {
      fieldSort = (FieldSort) lastFieldSort;

      if (fieldSort.getSortBy() != null
          && fieldSort.getSortBy().equals(orderBy)) {
        if (fieldSort.getAsc().equals(Boolean.TRUE)) {
          fieldSort.setAsc(Boolean.FALSE);
        } else {
          fieldSort.setAsc(Boolean.TRUE);
        }
      } else {
        fieldSort.setSortBy(orderBy);
        fieldSort.setAsc(Boolean.TRUE);
      }
    }

    request.setAttribute("sortBy", fieldSort.getSortBy());
    request.getSession().setAttribute(orderKey, fieldSort);
    if (fieldSort.getAsc().equals(Boolean.FALSE)) {
      request.setAttribute("order", "down");
    } else {
      request.setAttribute("order", "up");
    }

    return fieldSort;
  }
}

jquery.sortingTable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
(function($) {
  $.fn.sortingTable = function(options){
    $("head").append("<style type='text/css'>.link { cursor: pointer})</style>");

    var opts = $.extend({}, $.fn.sortingTable.defaults, options);

    var tableId = this.attr('id');
    var formName = opts.formName;

    $("form[name='" + formName + "']").append('<input type="hidden" name="orderBy" value="">');

    if( opts.sortColumns.length > 0 ){
      $.each(opts.sortColumns, function(col){
        $('#' + tableId + " thead th:eq(" + (col - 1) +")").addClass("link");
      });
    }else if(opts.excludeSortColumns.length == 0) {
      this.find("thead th").addClass("link");
    }

    if( opts.excludeSortColumns.length > 0 ){
      this.find('thead th').each(function(index, dom){
        if($.inArray((index + 1), opts.excludeSortColumns) == -1){
          $(this).addClass("link");
        }
      });
    }


    this.find("thead th").each(function(){
      if( $(this).hasClass("link") ) {
        $(this).click(function(){
          var id = $(this).attr('id');
          $(":hidden[name='orderBy']").val(id);

          var form = $("form[name='" + formName + "']");
          form.submit();
        });
      }
    });

    sorting(this, opts.sortBy, opts.order);

    $.each(opts.mergeColumns, function(num){
      _w_table_rowspan('#' + tableId, num);
    });
  };


  var sorting = function(table, sortBy, order){
    var position = 0;
    var header = '';
    table.find("thead th").each(function(index, dom){
      if(sortBy == $(dom).attr('id')){
        position = index;
        header = $(dom).text();
      }
    });

    table.find("thead th:eq(" + position + ")").html("<font color='yellow'>" + header + "</font>&nbsp;<img src='images/arrow_" + order + ".gif'/>");
  }

  var _w_table_rowspan = function(_w_table_id,_w_table_colnum){
    _w_table_firsttd = "";
    _w_table_currenttd = "";
    _w_table_SpanNum = 0;
    _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
    _w_table_Obj.each(function(i){
       if(i==0){
           _w_table_firsttd = $(this);
           _w_table_SpanNum = 1;
       }else{
           _w_table_currenttd = $(this);
           if(_w_table_firsttd.text()==_w_table_currenttd.text()){
                //var firstSection = _w_table_firsttd.parent().find('td:eq(4)').text();
                //var currentSection = _w_table_currenttd.parent().find('td:eq(4)').text();

                 _w_table_SpanNum++;
                 _w_table_currenttd.hide(); //remove();
                 _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
           }else{
               _w_table_firsttd = $(this);
               _w_table_SpanNum = 1;
           }
       }
   });
  }

  $.fn.sortingTable.defaults = {
    formName: 'form1',
    sortBy: '',
    order: 'asc',
    sortColumns: [],
    excludeSortColumns: [],
    mergeColumns: []
  };
})(jQuery)

xx.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$(function(){
  $("#result").sortingTable({
    formName: 'form1',
    sortBy: '${sortBy}',
    order: '${order}',
    excludeSortColumns: [1],
    mergeColumns: [1, 2, 3, 10]
  });
});
</script>
<table id="result" border="1">
  <thead>
  <tr>
    <th id="xx.a">Chapter</th>
    <th id="xx.b">Section/Regulation</th>
  </tr>
  </thead>
  ...
</table>