Stupid jQuery Table Sortプラグインに矢印をつけてみた

jQueryのプラグインを導入しすぎて何を使ってて、何を使っていないのか分からなくなってきましたよっと。

というわけでテーブルのソートをするのにサーバ通信するまでもなかったので、
jQuery Table Sortプラグインとやらを使ってます。
これね jQuery Table Sort | The Stupid Table Plugin by JoeQuery

このstupidtable関数は標準だとどの項目がソートされているのかが分かりません。
サイトを見るとCallbacksの説明で矢印のつけ方がのってるんだけどベージ毎にこれを書くのはめんどくさい。
というわけでライブラリの中身をちょこっといじってみました。

使っているバージョンはソース上に明記されてないので本日時点の最新です。

後、twitter bootstrapを対象にしてるので、bootstrapを使っていない方も似たようなやり方でやれば動く筈です。
では早速変更した箇所を載せてみます。

// ==================================================== //
//                  Begin execution!                    //
// ==================================================== //
// Do sorting when THs are clicked
table.delegate("th", "click", function(){
  var trs = table.find("tbody tr");


  var i = $(this).index();
  var classes = $(this).attr("class");
  var type = null;
  if (classes){
    classes = classes.split(/\s+/);

    for(var j=0; j<classes.length; j++){
      if(classes[j].search("type-") != -1){
        type = classes[j];
        break;
      }
    }
    if(type){
      type = type.split('-')[1];
    }
  }
  if(type){

    var icon = $("th").not(this).find('i');
    $(icon).remove();

    var iconup = $(this).find('.icon-arrow-up');
    var icondown = $(this).find('.icon-arrow-down');
    if (iconup.length != 0) {
      $(iconup).remove();
      $(this).append(" <i class='icon-arrow-down'></i>");
    } else {
      $(icondown).remove();
      $(this).append(" <i class='icon-arrow-up'></i>");
    }

    var sortMethod = sortFns[type];

    // Gather the elements for this column
    column = [];

    // Push either the value of the 'data-order-by' attribute if specified
    // or just the text() value in this column to column[] for comparison.
    trs.each(function(index,tr){
      var e = $(tr).children().eq(i);
      var order_by = e.attr('data-order-by') || e.text();
      column.push(order_by);
    });

    // If the column is already sorted, just reverse the order. The sort
    // map is just reversing the indexes.
    if(is_sorted_array(column, sortMethod)){
      column.reverse();
      var theMap = [];
      for(var i=column.length-1; i>=0; i--){
        theMap.push(i);
      }
    }
    else{
      // Get a sort map and apply to all rows
      theMap = sort_map(column, sortMethod);
    }

    var sortedTRs = $(apply_sort_map(trs, theMap));

    // Replace the content of tbody with the sortedTRs. Strangely (and
    // conveniently!) enough, .append accomplishes this for us.
    table.find("tbody").append(sortedTRs);
  }
});

このtable.delegate関数の中にある以下の内容が追加したソースどすえ。

var icon = $("th").not(this).find('i');
$(icon).remove();

var iconup = $(this).find('.icon-arrow-up');
var icondown = $(this).find('.icon-arrow-down');
if (iconup.length != 0) {
  $(iconup).remove();
  $(this).append(" <i class='icon-arrow-down'></i>");
} else {
  $(icondown).remove();
  $(this).append(" <i class='icon-arrow-up'></i>");
}

これでソートが分かりやすくなりますたよっとﾉｼ

ただこのライブラリはライセンスが不明のため改造しても良いのかどうかが気になりますが。。。