弁財天

ゴフマン「専門家を信じるのではなく、自分自身で考えて判断せよ」

DataTablesのクリックイベント update7

プログの中にApache Rollerのフレームワークを全く無視してjQueryのDatatablesプラグインを表示できるかやってみた。
ちなみにDBD::Pgを使ったしょぼいPerlのCGIが裏で動いていて直接このブログのPostgresqlデータベースにSQLを飛ばしてる。

「perl-DBD-Pg.x86_64 : A PostgreSQL interface for perl」を追加。
JSONの日本語が文字化ける時は「$dbh->{pg_enable_utf8} = 1;」を設定

クリック・イベントのマニュアルはこれ。
DOM / jQuery events

特定の列を非表示にするには
Hidden columns

クリックした行の非表示にした列の値を取得するのは
Getting values from hidden

        $('#weblogentry').on("click", "td", function() {
            var aData = oTable.fnGetData( this );
            var aPos = oTable.fnGetPosition( this );
            var sCols = oTable.fnGetData(aPos[0]);
            var anchor = sCols[0];
            alert('The cell[' + aPos + '] clicked on had the value of '+ aData + '\nanchor ' + anchor);
            window.open('http://benzaiten.dyndns.org/roller/ugya/entry/' + anchor);
        });

var aPos = oTable.fnGetPosition( this );
3行目の1列めをクリックすると"2,0,1"の値。
"行位置, 列位置(表示のみ), 列位置(非表示を含む)"なのかな?未確認
var sCols = oTable.fnGetData(aPos[0]);
"2,0,1"をaPos[0]で"2"を取得して"anchor,タイトル,作成時刻,更新時刻"を取得
var anchor = sCols[0];
"anchor,タイトル,作成時刻,更新時刻"をsCols[0]でアクセスして"anchor"を取得する

  if( $params->{sSearch} ){
    print STDERR "sSearch " . $params->{sSearch} . "...\n";
    $sql_search = "and title like '%" . $params->{sSearch} . "%'";
  }
  if( $params->{iSortCol_0} ){
    print STDERR "iSortCol_0 " . $params->{iSortCol_0} .
        "/sSortDir_0 " . $params->{sSortDir_0} . "...\n";
    if ($params->{iSortCol_0} eq "0") {
        $sql_orderby = "";
    } elsif ($params->{iSortCol_0} eq "1") {
        $sql_orderby = " order by title " . $params->{sSortDir_0} . " ";
    } elsif ($params->{iSortCol_0} eq "2") { 
        $sql_orderby = " order by pubtime " . $params->{sSortDir_0} . " ";
    } elsif ($params->{iSortCol_0} eq "3") {
        $sql_orderby = " order by updatetime " . $params->{sSortDir_0} . " ";
    }
  }
枠線の削除は
#weblogentry_wrapper {
    width: 500px;
/* これ
    border: 1px solid #B8DCFE;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 7px;
*/
}

検索ボックスの大きさ

.dataTables_filter input { width: 250px }

表のフォントサイズ変更

th {font-size:10px}
td {font-size:10px}

検索ボックスが3文字になるまで検索しない。

        var api = $('#weblogentry').dataTable().api();

        $('#weblogentry_filter input').unbind().bind("input", function(e) {
          if(this.value.length >= 3 || e.keyCode == 13) {
            api.search(this.value).draw();
          }
          if(this.value == "") {
              api.search("").draw();
          }
          return;
        });
特定のカラムのソートをやめる。Disable sorting of one column
        oTable = $('#ip_data').dataTable( {
            …,
            "columnDefs": [ { "targets": 2, "orderable": false } ],

TableTools not loading on a DataTables Table
jsfiddle.net/v5c9v8jf/これも

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.0/css/dataTables.tableTools.css" media="all">

<script type="text/javascript" language="javascript" src="//cdn.datatables.net/tabletools/2.2.0/js/dataTables.tableTools.js"></script>


    $(document).ready( function() {
        oTable = $('#weblogentry').dataTable( {
        // ここから
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls.swf",
            "aButtons": [
              "copy",
              "csv",
              "xls",
              "print"
          ]
        },
        "aLengthMenu": [
           [25, 50, 100, 200, -1],
           [25, 50, 100, 200, "All"]
        ],
        "iDisplayLength":50, 
        // ここまで追加
            "bProcessing":     true,
サーバー側では$params->{iDisplayLength} == -1 の時にSQLからLIMIT OFFSETを外す処理が必要。 このとき検索結果全件をブラウザのJavascriptエンジン側に出力することになるのだけど、それはブラウザ側のリソースの問題だというすっげー仕掛けなのだ。

まぁスマホのブラウザはメモリー足りないし32ビットなのでパンクするだろうけど、64ビットプロセスなら今までと違ってそこそこ動いちゃうからこんなツールが登場したのだろうな。

投稿されたコメント:

コメント
コメントは無効になっています。