5

jquery datatable プラグインを使用して、jquery UI ダイアログにテーブルを表示しています。以下は、テーブルを描画するために呼び出している関数です。

function listPtCharges(filter){
var chgTable;
chgTable =
  $('#chargeTable').dataTable({
    "bJQueryUI": true,
    "bDestroy": true,    
    "sDom": 'tT',
    "bSort": false,
    "bAutoWidth": false,
    "sAjaxSource": "/ajax/ptchglist.php",
    "sAjaxDataProp": "Records",
    "fnServerData": function ( sSource, aoData, fnCallback ) {
      aoData.push( { "name": "acctno", "value": $("#curAcctno").val() } );
      aoData.push( { "name": "ins_id", "value": $("#ins_id").val() } );
      aoData.push( { "name": "filter", "value": filter } );
      $.ajax( {
        "dataType" : 'json',
        "type" : "POST",
        "url" : sSource,
        "data" : aoData,
        "success" : fnCallback
        } );
    } ,
    "aoColumns":
    [
     {"bVisible":false},
     {"sWidth": 55},
     {"sWidth": 30},
     {"sWidth": 40},
     {"sWidth": 125},
     {"sWidth": 50},
     {"sWidth": 50},
     {"sWidth": 20},                
     {"bVisible":false}  // allowed
    ],
    "oTableTools": {
      "sRowSelect": chgSelctionTyp,
      "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
      "aButtons": []
    }
  });
}

この関数は、ダイアログを開く呼び出しの直後に呼び出されます。ダイアログを開いてテーブルをロードするコード行を次に示します。 

var oTT = TableTools.fnGetInstance( 'chargeTable' );
      if(oTT)
        oTT.fnSelectNone();
      $( "#chargeList" ).dialog( "open" );
      listPtCharges();

ダイアログ内には、フィルターの値へのイベントハンドラーを備えた別のボタンがあり、新しいフィルターを使用して同じ関数を呼び出します。新しくロードされたテーブルは、常にサーバーからより多くの行を取得します。

奇妙な問題を除いて、すべてが順調です。より多くの行を含む新しいテーブルが描画されるときは常に、前のテーブルと同じ数の行のみが選択可能です。

つまり、テーブルに 5 行をロードし、ボタンを押してテーブルの新しいデータ セットを取得したとします。テーブルに 8 行がロードされました。しかし、今では上位 5 行のみを選択できます。残りのすべては、未確認の投稿に関連する firebug でエラーになります。

この点での助けは非常に高く評価されます。

編集: 選択した行にアクセスしようとしているコードは次のとおりです。

    var oTT = TableTools.fnGetInstance( 'chargeTable' );
    var aData = oTT.fnGetSelectedData();

また、これは、firebug でエラーを示す jquery データテーブルの一部です。

"fnIsSelected": function ( n )
{
var pos = this.s.dt.oInstance.fnGetPosition( n );
return (this.s.dt.aoData[pos]._DTTT_selected===true) ? true : false;
},

クリックできない行をクリックした直後に、次のエラーが表示されます。

TypeError: this.s.dt.aoData[pos] は未定義です

aodata の長さは、以前にロードされたテーブルと何らかの形で同じだと思います。

4

3 に答える 3

4

テーブルを破棄して再構築するべきではありません。データテーブルにデータを再フェッチさせるだけです。

呼び出しはリフレッシュをトリガーするのに十分だと思いますfnDraw-ただし、テストしていません:

 $('#chargeTable').dataTable().fnDraw();

あなたの関数では、パラメータfnServerDataをロードする方法を変更する必要があるかもしれません:filter

// keep this variable in some shared scope :
var filterPtr = {value: ''};

$('#chargeTable').dataTable({
    ....
    "fnServerData": function(...){
         ...
         aoData.push({ "name": "filter", "value": filterPtr.value });
         ...
     }
});

// if you need to update the filter :
filterPtr.value = 'newValue';
$('#chargeTable').dataTable().fnDraw();
于 2014-01-30T15:51:14.383 に答える