title: aoData is null when using multiple instances of jquery datatable
body: <p><strong>Scenario:</strong></p>
  
  <p>On a webpage I have three divs that contain table tags.</p>
  
  <p>There are 3 buttons, clicking on each button creates an instance of the datatable on a particular div with the table tag.</p>
  
  <p>The datatable gets the data from serverside</p>
  
  <p>All the data returned and displayed, pagination, filtering works fine.</p>
  
  <p>So when all three instances are created, using fnSettings() on only the last instance created returns the proper object, and the other two instances return null </p>
  
  <p><strong>So using fnData() etc api  methods throw an error saying : "TypeError: Cannot read property 'aoData' of null" because settings object of that datatable instance is somehow null</strong></p>
  
  <p><strong>Code Description</strong></p>
  
  <p>I have made a class called datagrid, and I create multiple instances of this class:</p>
  
  <pre><code>/**
   * datagrid class contains methods and properties that will help in controllling and manipulating the multiple instances of the datagrid class
   * 
   * This function is the constructor for the datagrid class
   * 
   * @param {string} domContainerSelector DOM selector of the element containing the datagrid
   * @param {Array} columns Definitions of the columns of the datagrid
   * @param {string} ajaxSource The url that the jqgrid will use to request for data
   * @param {Object} configurationParameters The configuration parameters that will be used by the jqGrid and this datagrid instance. Currently suppoted configuration parameters are: initialCacheSize, iDisplayLength, sScrollY, bPaginate, bFilter, sDom, bSort
   * @param {Object} uiCallback Contains callback functions that are used when a server request is in progress and after the completion of the request. Mainly used for showing progress indicators.
   * @returns {datagrid}
   */
  function datagrid(domContainerSelector, columns, ajaxSource, configurationParameters, uiCallback)
  {
      this.domContainerSelector = domContainerSelector;
      this.domTableSelector = this.domContainerSelector + " #grid";
      this.domRowSelector = this.domTableSelector + " tbody tr";
      this.domGridWrapperSelector = this.domContainerSelector + " .dataTables_wrapper";
      this.columns = columns;
      this.ajaxSource = ajaxSource;
      this.configParams = configurationParameters;
      this.uiCallback = uiCallback;
      this.cache= {
              start: 0,
              end: 0,
              initialSize:this.configParams.initialCacheSize == undefined ? 2 : this.configParams.initialCacheSize,
              pageSize:this.configParams.iDisplayLength == undefined ? 10 : this.configParams.iDisplayLength,
              loading:false,
              jsondata: {},
              reset: function(){
                  this.start=0;
                  this.end=0;
                  this.loading=false;
                  this.jsondata={};
              }
      };
      /**
       * This method returns the row selected by the user
       * 
       * @return {Object} Row object containing columns as its properties
       */
      this.getSelectedRow = function()
      {
          var allrows = this.dataTable.fnGetNodes();
          for (i = 0; i &lt; allrows.length; i++)
              if ($(allrows[i]).hasClass('row_selected'))
                  return this.dataTable.fnGetData(allrows[i]);
      };
      this.getPostDataValue=function(postData, key){
          for (var i=0;i&lt;postData.length;i++)
          {
              if (postData[i].name == key)
              {
                  return postData[i].value;
              }
          }
          return null;
      };
      this.setPostDataValue=function(postData, key, value){
          for (var i=0; i&lt;postData.length;i++)
          {
              if (postData[i].name == key)
              {
                  postData[i].value = value;
              }
          }
      };
      this.setPostDataFilterValues=function(postData){
          for (i=0;i&lt;this.columns.length;i++)
          {
              var key="sSearch_"+i;
              this.setPostDataValue(postData,key,this.columns[i].sSearch===undefined?'':this.columns[i].sSearch);
          }
      };
      this.filterColumnKeyupHandler = function(evt) {
          var id=evt.target.id;
          var index=id.charAt(id.length-1);
          var oldvalue=this.columns[index].sSearch;
          var value = evt.target.value == '' ? undefined : evt.target.value;
          if (oldvalue!=value) this.cache.reset();//resetting the cache because the datagrid is in dirty state
          this.columns[index].sSearch=value;
          if (evt.keyCode == 13) this.dataTable.fnFilter();
      };
      /**
       * This method acts as the general button handler when an operation is in progress
       */
      this.busyStateButtonHandler=function()
      {
          ui.showmessage("Another operation is in progress. Please wait for the operation to complete");
      };
      /**
       * This method sets the event handlers for the datagrid
      */
      this.setEventHandlers = function() {
          var self=this;
          $(this.domGridWrapperSelector + " input[class='columnfilterinput']").off("keyup").on("keyup", function(evt) {self.filterColumnKeyupHandler(evt,self)});
          $(this.domGridWrapperSelector + " .filterbar .searchbtn").off("click").on("click", function() {self.dataTable.fnFilter()});
      };
      /**
       * This method sets the appropriate event handlers to indicate busy status
      */
      this.setBusyStatusEventHandlers=function()
      {
          $(this.domGridWrapperSelector + " input[class='columnfilterinput']").off("keyup").on("keyup", this.busyStateButtonHandler);
          $(this.domGridWrapperSelector + " .filterbar .searchbtn").off("click").on("click", this.busyStateButtonHandler);
      };
      /**
       * This method enables column specific filtering
       * 
       * This methods adds filtering capability to columns whose definitions indicate that they are searchable (bSearchable:true)
       */
      this.enablecolumnfilter = function() {
          var self = this;
          var oTable = self.dataTable;
          var oSettings = oTable.fnSettings();
          var aoColumns = oSettings.aoColumns;
          var nTHead = oSettings.nTHead;
          var htmlTrTemplate = "&lt;tr class='filterbar'&gt;{content}&lt;/tr&gt;";
          var htmlTdTemplate = "&lt;td&gt;{content}&lt;/td&gt;";
          var htmlInputTemplate = "&lt;input type='text' name='{name}' id='{id}' class='{class}' /&gt;&lt;div class='searchbtn' id='{searchbtnid}'&gt;&lt;div class='icon-filter'&gt;&lt;/div&gt;&lt;/div&gt;";
          var isAnyColumnFilterable = false;
          var htmlTr = htmlTrTemplate;
          var allHtmlTds = "";
          for (i = 0; i &lt; aoColumns.length; i++)
          {
              var column = aoColumns[i];
              var htmlTd = htmlTdTemplate;
              if (column.bSearchable == true)
              {
                  isAnyColumnFilterable = true;
                  var htmlInput = htmlInputTemplate;
                  htmlInput = htmlInput.replace('{name}', column.mData);
                  htmlInput = htmlInput.replace('{id}', "sSearch_" + i);
                  htmlInput = htmlInput.replace('{class}', 'columnfilterinput');
                  htmlTd = htmlTd.replace('{content}', htmlInput);
              }
              else
                  htmlTd = htmlTd.replace('{content}', '');
              allHtmlTds += htmlTd;
          }
          if (isAnyColumnFilterable)
          {
              htmlTr = htmlTr.replace('{content}', allHtmlTds);
              nTHead.innerHTML += htmlTr;
              $(this.domGridWrapperSelector + " .filterbar input[class='columnfilterinput']").each(function(){
                  $(this).width($(this).parent().width()-26);
              });
          }
      };
      /**
       * This method enables single selection on the rows of the grid
       */
      this.enableSelection = function()
      {
          $(this.domRowSelector).die("click").live("click", function() {
              if ($(this).hasClass('row_selected')) {
                  $(this).removeClass('row_selected');
              }
              else {
                  $(this).siblings().removeClass('row_selected');
                  $(this).addClass('row_selected');
              }
          });
      };
      this.loadDataIntoCache=function(postData, sourceUrl, start, length){
          if (!this.cache.loading)
          {
              var postData=$.extend(true, [], postData);
              var start = start==undefined?this.cache.end:start;
              var length = length==undefined?this.cache.pageSize:length;
              var end = start + length;
              this.setPostDataValue(postData, "iDisplayStart", start);
              this.setPostDataValue(postData, "iDisplayLength", length);
  
              var self=this;
              this.cache.loading=true;
              $.ajax({
                  type: "POST",
                  url: sourceUrl,
                  data: postData,
                  success:
                          function(json, textStatus, jqXHR)
                          {
                              json = JSON.parse(json);
                              var olddata=self.cache.jsondata.aaData;
                              if (olddata===undefined) self.cache.jsondata = $.extend(true, {}, json);
                              else olddata.push.apply(olddata,json.aaData);
                              self.cache.end=end;
                          },
                  error:
                          function(jqXHR, textStatus, errorThrown)
                          {
                              ui.showmessage(jqXHR.responseText);//remove this from here
                          },
                  complete:
                          function()
                          {
                              self.cache.loading=false;
                          }
              });
          }
      };
      this.loadDataFromCache=function(postData,sourceUrl){
          var start=this.getPostDataValue(postData, "iDisplayStart");
          var length=this.cache.pageSize;
          var end=start+length;
          var sEcho = this.getPostDataValue(postData,"sEcho");
          if (this.cache.end&gt;=end)
          {
              var jsondata=$.extend(true, {},this.cache.jsondata);
              var data=jsondata.aaData;
              jsondata.aaData=data.splice(start,length);
              jsondata.sEcho = sEcho;
              var totalRecords=jsondata.iTotalRecords;
              if ((this.cache.end-end)&lt;((this.cache.initialSize*this.cache.pageSize)/2) &amp;&amp; (totalRecords==0 || this.cache.end&lt;totalRecords) ) this.loadDataIntoCache(postData, sourceUrl);//prefetch data if needed
              return jsondata;
          }
          else
          {
              this.loadDataIntoCache(postData,sourceUrl);
              return null;
          }
      };
      /**
       * This method interfaces with the backend end controller
       * 
       * This method is called when the grid initiates any operation that requires server side processing
       * 
       * @param {String} sSource The source url that will be used for the xhr request
       * @param {Array} aoData Contains the parameters sent by the dataTable that will be forwarded to the backend controller
       * @param {Function} fnCallback The callback function of the dataTable that gets executed to finally render the grid with the data
       */
      this.interfaceWithServer = function(sSource, aoData, fnCallback)
      {
          this.setPostDataFilterValues(aoData);
          var self=this;
          if (this.cache.end==0)
          {
              this.setPostDataValue(aoData, "iDisplayStart", this.cache.start);
              if (this.dataTable!=undefined) this.dataTable.fnSettings()._iDisplayStart=0;
              this.loadDataIntoCache(aoData, sSource, 0, (this.cache.initialSize*this.cache.pageSize));
          }
          var data=this.loadDataFromCache(aoData,sSource);
          if (data!=null) fnCallback(data);
          else
          {
              this.setBusyStatusEventHandlers();
              this.uiCallback.inprogress();
              self.cacheLoadingTimerId=setInterval(function(){
                  if (self.cache.loading==false)
                  {
                      clearInterval(self.cacheLoadingTimerId);
                      var data=self.loadDataFromCache(aoData,sSource);
                      fnCallback(data);
                      self.uiCallback.completed();
                      self.setEventHandlers();
                  }
              },500);
          }
      };
      /**
       * This method destroys the datatable instance
       * 
       * Remove all the contents from the parent div and reinserts a simple table tag on which a fresh datatable will be reinitialized
       */
      this.destroy = function()
      {
          $(this.domRowSelector).die("click");
          $(this.domGridWrapperSelector).remove();//remove only the datatable generated dynamic code
          $(this.domContainerSelector).prepend("&lt;table id='grid'&gt;&lt;/table&gt;");
      };
      /**
       * The dataTable property holds the instance of the jquery Datatable
       */
      this.dataTable = $(this.domTableSelector).dataTable({
          "bJQueryUI": true,
          "sScrollY": this.configParams.sScrollY == undefined ? "320px" : this.configParams.sScrollY,
          "bAutoWidth": true,
          "bPaginate": this.configParams.bPaginate == undefined ? true : this.configParams.bPaginate,
          "sPaginationType": "two_button",
          "bLengthChange": false,
          "bFilter": this.configParams.bFilter == undefined ? true : this.configParams.bFilter,
          "sDom": this.configParams.sDom == undefined ? '&lt;"H"lfr&gt;t&lt;"F"ip&gt;' : this.configParams.sDom,
          "bSort": this.configParams.bSort == undefined ? true : this.configParams.bSort,
          "iDisplayLength": this.configParams.iDisplayLength == undefined ? 10 : this.configParams.iDisplayLength,
          "bServerSide": true,
          "sAjaxSource": this.ajaxSource,
          "fnServerData": this.interfaceWithServer.bind(this),
          "oLanguage": {
              "sZeroRecords": "No Records Found",
              "sInfo": "_START_ - _END_ of _TOTAL_",
              "sInfoEmpty": "0 to 0 of 0"
          },
          "aoColumns": this.columns
      });
  
      this.init=function(){
          this.enableSelection();
          this.enablecolumnfilter();
          this.setEventHandlers();
      };
      this.init();
  };
  </code></pre>
  
  <p>Now in my web page this is where I create the 3 instances :</p>
  
  <pre><code>switch (dialog)
          {
              case "cusgrp_dialog":
                  var columndefs = [
                      {
                          "sTitle": "XWBNCD",
                          "mData": "xwbncd",
                          "sWidth": "40%"
                      },
                      {
                          "sTitle": "XWKHTX",
                          "mData": "xwkhtx",
                          "sWidth": "60%"
                      }
                  ];
                  var ajaxSource = "./entities/Cusgrp";
                  var configurationParameters = {
                      bFilter: null,
                      sDom: 't&lt;"dataTable_controlbar"ip&gt;'
                  };
                  this.customergroupDatagrid = new datagrid(domContainerSelector, columndefs, ajaxSource, configurationParameters, uiCallback);
                  break;
              case "slmen_dialog":
                  var columndefs = [
                      {
                          "sTitle": "PERSON",
                          "mData": "person",
                          "sWidth": "40%"
                      },
                      {
                          "sTitle": "PNAME",
                          "mData": "pname",
                          "sWidth": "60%"
                      }
                  ];
                  var ajaxSource = "./entities/Slmen";
                  var configurationParameters = {
                      bFilter: null,
                      sDom: 't&lt;"dataTable_controlbar"ip&gt;'
                  };
                  this.salesmanDatagrid = new datagrid(domContainerSelector, columndefs, ajaxSource, configurationParameters, uiCallback);
                  break;
              case "dists_dialog":
                  var columndefs = [
                      {
                          "sTitle": "DSDCDE",
                          "mData": "dsdcde",
                          "sWidth": "40%"
                      },
                      {
                          "sTitle": "DNAME",
                          "mData": "dname",
                          "sWidth": "60%"
                      }
                  ];
                  var ajaxSource = "./entities/Dists";
                  var configurationParameters = {
                      bFilter: null,
                      sDom: 't&lt;"dataTable_controlbar"ip&gt;'
                  };
                  this.distributorDatagrid = new datagrid(domContainerSelector, columndefs, ajaxSource, configurationParameters, uiCallback);
                  break;
          }
  </code></pre>
  
  <p>After all three instances are created, only the last one supposedly has fnSettings() object defined rest instances return null for fnSettings and thus calling other api methods that use aoData (which is a member of the fnSettings() returned object) show the error that can't read property aoData of null</p>
  
  <p><strong>Console Preview:</strong></p>
  
  <p>The 3 instances are stored in <strong>customergroupDatagrid</strong>, <strong>salesmanDatagrid</strong>, <strong>distributorDatagrid</strong> variables</p>
  
  <p><strong>When the customergroupDatagrid instance is created</strong></p>
  
  <p>customergroupDatagrid.dataTable.fnSettings(); // returns object</p>
  
  <p><strong>When the salesmanDatagrid instance is created</strong></p>
  
  <p>salesmanDatagrid.dataTable.fnSettings(); // returns object<br />
  customergroupDatagrid.dataTable.fnSettings(); // returns null</p>
  
  <p><strong>When the distributorDatagrid instance is created</strong></p>
  
  <p>distributorDatagrid.dataTable.fnSettings(); // returns object<br />
  salesmanDatagrid.dataTable.fnSettings(); // returns null<br />
  customergroupDatagrid.dataTable.fnSettings(); // returns null</p>