JQuery DataTables
テーブルのデータを検索したり、列でソートしたりする（複数でソートもできる）。すげぇ！！！
DataTablesに関しては、ちょっとばかしひねったことをやったので、メモメモしておく。
テーブル（table id="data_tables"）の項目・・・「料理種別」「料理名」「料理した日」※あくまで例ですよ、ほんとはちがうよ。
で、テーブルを作成して、GET値で検索フィルタをかけて結果を表示する。ってことをやた。
JSのソースはこれ。
/* 料理種別 配列つくる*/var results_column = new Array();results_column[0] = '日本料理';results_column[1] = '中華料理';results_column[2] = 'フランス料理';results_column[3] = 'イタリア料理';results_column[4] = 'トルコ料理';results_column[5] = 'インド料理';/* GET値取得操作 */$.extend({getUrlVars: function(){var vars = [], hash;var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');for(var i = 0; i < hashes.length; i++){hash = hashes[i].split('=');vars.push(hash[0]);vars[hash[0]] = hash[1];}return vars;},getUrlVar: function(name){return $.getUrlVars()[name];}});/* GET値 */var get_param = $.getUrlVar('list');/* datatables.js SETUP */$(document).ready(function() {/* datatables.jp setting */$('#data_tables').dataTable( {"bAutoWidth": false,"iDisplayLength": 10,"aaSorting": [[0,'desc'], [0,'desc']],"oLanguage": {"sLengthMenu": "表示件数 _MENU_ 件","sSearch": "検索:","sInfo": "検索結果 全_TOTAL_ 件 (_START_～_END_件表示中)","sInfoFiltered": " - 全_MAX_件から検索条件でフィルタ中"}} );/* Initialise datatables */var oTable = $('#data_tables').dataTable();/* セレクトボックスと検索ボックスの連携 */$('select#engines').change( function() {oTable.fnFilter( $(this).val() );} );/* GET値で検索フィルタ */var fillter_word ='';for (var i = 0; i < results_column.length; i++){if(get_param == i){fillter_word = results_column[i];break;}}oTable.fnFilter(fillter_word);$("#engines").val(fillter_word);} );
GET値取得操作で参考にしたサイト
http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.htmlなんか、後で見直してみると、どうしてこういう記述になったのかさっぱり思い出せない。（汗）
2011/11/12 追記
いいサイトさんがあったのでメモ
http://baalzephon.dyndns.org/tech/index.php?JavaScript/jQuery/DataTables
