jquery-datatables - DataTables-行の詳細を展開するときにaoDataがnull

Question

ここにあるドリルダウンDataTableを使用しています。

データテーブルはアコーディオン内に存在します。ユーザーはそれをクリックしてカテゴリを選択し、それが展開されてそのカテゴリに関連するデータテーブルが表示されます。関数initTableは、ユーザーがカテゴリをクリックしたときに呼び出されます。

DataTables docは、このコードを使用してページ上の複数のdataTablesを説明するように言っていますが、それを機能させることができません。

$(document).ready(function() {
    $('.dataTable').dataTable();
} );

私がやったことは、「＃example」を使用するのではなく、99％が機能する「＃」+カテゴリに置き換えました。カテゴリをクリックし、ドリルダウンして行の追加データを表示し、新しいカテゴリに切り替えて、同じことを行うことができます。

動作しないのはこれです-カテゴリをクリックしてから、そのカテゴリを閉じるか、別のカテゴリに移動してから最初に戻ります-行を展開すると、「aoData」がnullであるか、オブジェクトではないというエラーがスローされます。次の3つの画像は、私が話していることを示しています。3番目の画像の詳細行が表示されないことに注意してください。

画像を挿入することはできませんが、ここに投稿して、私が話していることを示しています。

これが、テーブルを作成するために呼び出されるinitTable関数です。新しいテーブルを作成する前に、bDestroyを使用して既存のテーブルを破棄しています。

どんな助けでも大歓迎です！

function initTable(category, facility)
{
  if (gsCategory == "")
    gsCategory = category;
  else if (gsCategory == category)
    gbToggle = !gbToggle;
  else
    gbToggle = false;

  gsCategory = category;

  if (gbToggle == false)
  {
    gsCategory = category;

    var select = document.forms[0].selFacility;
    var facility = select.options[select.selectedIndex].value;

    document.body.style.cursor = 'wait';

    var patJson = getJson(facility, category);
    var anOpen = [];
    var sImageUrl = "../images/";
    makeTable(category);

    document.body.style.cursor = 'default';

    var oTable = $('#'+category).dataTable( {
      "bProcessing": false,
      "bDestroy": true,
      "aaData": patJson,
      "bAutoWidth": false,
      "aoColumns": [
        {
         "mDataProp": null, 
         "sClass": "control center", 
         "sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">',
         "sWidth": "5%"
        },
        { "mDataProp": "S_PAT_NAME", "sWidth": "30%" },
        { "mDataProp": "S_AGE", "sWidth": "15%"},
        { "mDataProp": "S_FIN", "sWidth": "30%"},
        { "mDataProp": "S_ROOM_BED", "sWidth": "20%" }
      ]
    } );

    $('#'+category+' td.control').live( 'click', function () 
    {
      var nTr = this.parentNode;
      var i = $.inArray( nTr, anOpen );

      if ( i === -1 ) 
      {
        $('img', this).attr( 'src', sImageUrl+"details_close.png" );
        var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
        $('div.innerDetails', nDetailsRow).slideDown();
        anOpen.push( nTr );
      }
      else 
      {
        $('img', this).attr( 'src', sImageUrl+"details_open.png" );
        $('div.innerDetails', $(nTr).next()[0]).slideUp( function () 
        {
          oTable.fnClose( nTr );
          anOpen.splice( i, 1 );
        } );
      }
    } );
  }
}
function fnFormatDetails( oTable, nTr )
{
  var oData = oTable.fnGetData( nTr );
  var sOut = 
     '<div class="innerDetails">'+
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
           '<tr><td>Trigger Order:</td><td>'+oData.S_TRIGGER_MED+'</td></tr>'+
           '<tr><td>Allergies:</td><td>'+oData.S_ALLERGIES+'</td></tr>'
        '</table>'+
     '</div>';
  return sOut;
}