0

私は "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 回の呼び出しだけで返したい追加のレコードセットがありますが、これはデータテーブル フレームワーク内で可能ですか? データテーブルによって取得されたときに JSON を出力するページは、JSON のみを想定しており、他の要素が存在する場合はエラーが発生します。

更新 1:これが適切なルートかどうかはわかりませんが、datatables 非表示の列機能を使用することが 1 つのオプションになると考えています。http://www.datatables.net/examples/basic_init/hidden_ ​​columns.html 非表示の列の 1 つのセルに ID を持つ要素を詰め込み、jQuery 経由で ID の情報にアクセスできると思います。

更新 2:おそらく、これは親ページの他の要素を JSON 応答ページの要素から更新する方法です (私はこの問題を datatables フォーラムでも提起しましたが、応答はありませんでした):

  1. json データの最初の行にある各隠し入力の ID を追加して含める

  2. 列が非表示の場合、要素にアクセスできないように見えるため、非表示の列を試さないでください。(間違っていたら誰か教えてください...)

  3. 非表示の入力を一度だけレンダリングする必要がある場合は、そうします

  4. 親ページの jQuery を介して非表示の入力にアクセスする

更新 3: @JM4 - これがあなたの質問に具体的に対処するかどうかはわかりませんが、非表示の入力ルート (たとえば、) を使用して、<input type="hidden id="myCustomID_012" />必要なことを完了することができました。

行のクリックを処理するために、次のような関数を使用しました。この関数は、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 */
  }

dataTable ビルド内で、clickRowHandler 関数が次のように呼び出されました。

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

また、DataTables フォーラム (おそらくここから開始: http://datatables.net/forums/comments.php?DiscussionID=3931 )でこれを見た場所を思い出せませんが、使用できる別のルートは上記の json データを出力することです-そして、dataTables が必要とするものを超えて。そのため、"sEcho" と "iTotalRecords" と "iTotalDisplayRecords" と "aaData" を含む json を出力する必要がありますが、独自の名前と値のペアを作成することもできます。

テーブル ヘッダーの選択ドロップダウンに必要な 10 個のユーザー名のリストがある場合、json を作成する場所で名前と値のペアを作成し、それを「selectUserNames」と呼ぶことができます。次に、dataTables ビルドで、そのカスタム json オブジェクトをリストに変換します (ここではすべての関数を表示しているわけではありません)。

この関数は、dataTables ビルドの外部で、選択ドロップダウンを作成します。// 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>';
}

そしてdataTablesビルド内...

  $.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 );
   });
});
4

1 に答える 1

0

drawcallback を使用して現在の行にクラスを追加する場合 (たとえば、選択したクラスを追加する場合)、非表示の値を取得できます。

これは、現在の行に「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];
    }
  }
});
于 2011-08-26T16:16:50.820 に答える