jquery DataTables plugin：プラグインが期待するJSON以外のサーバー側のデータをキャプチャできますか？

Question

私は "bServerSide"を使用しています：true、 "sAjaxSource"：、および "fnServerData"：...は、データテーブルを作成します。これはうまくいきます。

"bFilter": true, 
"bSort": true, 
"bSortClasses": true, 
"bProcessing": true, 
"bServerSide": true, 
"sAjaxSource": "my_page_that_outputs_json.asp", 

"fnServerData": function (sSource, aoData, fnCallback) { 
    aoData.push({ "name": "my_custom_var" , "value": $('#someCustomVar').val() });     
    $.getJSON(sSource, aoData, function (json) { 
     fnCallback(json); 
    }); 
}, 

しかし、私がサーバーに電話をかけると、サーバーに接続しているページからJSON以上のものを返したいと思います。私は、データベースへの呼び出しを1回だけ返すだけの追加レコードセットを持っていますが、これはdatatablesフレームワーク内で可能ですか？ JSONを出力するページは、データテーブルによって取得されたときにのみJSONを期待しています。他の要素がある場合はエラーを返します。

更新1：これは取るべき適切なルートであればは、 を知らないが、私は1つのオプションがDataTableの 隠し列の機能を使用することであろうことを今考えています。 http://www.datatables.net/examples/basic_init/hidden_columns.html 隠し列の1つのセルにIDを持つ要素を埋め込み、 とし、jQuery経由でIDの情報にアクセスできるとします。

アップデート2：たぶんこれは、親ページ上の他の要素が JSONレスポンスページの要素（私も応答がないと、DataTableのフォーラムでこの 問題を提起してきた）から更新することができる方法です。

1. 要素がアクセス不能 ときのように見えるので、非表示の列をしようとしないJSONデータ

2. の最初の行の各隠し入力 のためのIDを追加し、含ま列は非表示になります。隠し入力は一度しかレンダリングする必要がある場合は、親ページにjQueryを介して、そう

3. アクセスを行う、その後、

4. 隠し入力を（私はこのことについて間違っている場合、誰かが...お知らせください）

アップデート3：JM4 @ - 例えば、<input type="hidden id="myCustomID_012" /> - - 私はこれは特に、あなたの質問、 に対処しますが、私は隠された入力ルートを使用することができたことを知らない私が必要なものとは成し遂げますする。

次のような関数を使用して、行のクリックを処理しました。 この関数は、dataTableビルドの外部にあります。 dataTableのビルドインサイド

function clickRowHandler() { 
/* Highlight selected row on single click */ 
$('.tblIntrepid tbody tr').click(function(event) { 
    $(oTable.fnSettings().aoData).each(function(){ 
     $(this.nTr).removeClass('row_selected'); 
    }); 

    // update the myIntrepidID value for form "complete" submission 
      // myIntrepidID was already on the page, not in the dataTable 
    var myNewIntrepidID = $(this).find("td:first input").val(); 
    $('#myIntrepidID').val(myNewIntrepidID); 
    // set the row class 
    $(event.target.parentNode).toggleClass('row_selected'); 
    }); 
    /* more details */ 
    } 

、clickRowHandler機能は、このよう で呼ばれていた：私は、DataTableのフォーラム でこれを見たところ

"fnDrawCallback": function() { 
     clickRowHandler(); 
}, 

また、私は覚えていない（おそらくここで開始しました： http://datatables.net/forums/comments.php?DiscussionID=3931） しかし、あなたが使用できるもう1つのルートは、のdataTablesに必要なjsonデータを出力することです。したがって、 「sEcho」と「iTotalRecords」と「iTotalDisplayRecords」と「aaData」を含むjsonを出力する必要がある間に、 も独自の名前と値のペアを作成できます。

あなたは、テーブルヘッダー内の選択ドロップダウン に望んでいた10のユーザ名のリストを持っていた場合、あなたはあなたのJSONを構築し、「selectUserNames」と呼んで 場所に名前/値のペアを構築することができます。次に、あなたの のDataTableを構築するには、あなたがあなたのリスト にそのカスタムJSONオブジェクトを回すでしょう（私はここですべての機能を表示していないよ）：

この機能を構築するのDataTableの外には、[ドロップダウンを作成します。 // http://datatables.net/forums/comments.php?DiscussionID=3931&page=1#Item_6

function fnCreateSelect(aData) { 
    var r='<select><option value=""></option>', i, iLen=aData.length; 
    //alert(iLen); 
    for (i=0 ; i<iLen ; i++) 
    { 
     r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; 
    } 
    return r+'</select>'; 
} 

そしてDataTableの内部には、あなたが（exempleは、選択したクラスを追加するために）現在の行にクラスを追加するdrawcallbackを使用する場合、それは可能です...

$.getJSON(sSource, aoData, function (json) { 
    if (json.sEcho == 1) { 
     $("thead td.search").each(function() { 

/* Insert the select menu */ 
this.innerHTML = fnCreateSelect(json.selectUserNames); 

/* Add the event listener for the newly created element */ 
    $('select', this).change(function() { 
    oTable.fnFilter($(this).val(), 8); 
    }); 
}); 

Answer 1

を構築します隠し値を取得します。

ここに、現在の行に 'row_selected'クラスを追加するfnDrawCallback関数があります。これがこのクラスの唯一の行である場合にのみ機能します。

"fnDrawCallback": function(){ 
    $('td').bind('mouseenter', function() { $(this).parent().addClass('row_selected').css('cursor', 'pointer'); }); 
    $('td').bind('mouseleave', function() { $(this).parent().removeClass('row_selected'); }); 
}, 

あなたはJSONでテーブルを埋める問題は、選択したノードのnodeNameのが未定義であるということです。その代わりに、選択したクラスの行を見つけることができます

$("#leadList tbody").click(function(event) { 
    var aTrs = table.fnGetNodes(); 
    for (var i=0 ; i<aTrs.length ; i++) { 
    if ($(aTrs[i]).hasClass('row_selected')) { 
     // here you get the data without the need of fnGetPosition 
     var aData = table.fnGetData(i); 
     location.href='mylink/' + aData[0]; 
    } 
    } 
});