title: Why does this *jquery.dataTables.js* example not work?
body: <p><strong><em>Why is this DataTables.js example failing</em></strong>?</p>
  
  <p>Its a simple enough example, and the code seems to be correct.<br>
  -But, it fails with an exception... (see below)</p>
  
  <p><em>(What is wrong with the code?... -Or,  what else can I look at to determine and fix the issue?)</em></p>
  
  <p>Thank you for any help.</p>
  
  <p>Further information is below...</p>
  
  <p><strong>Here is the HTML...</strong></p>
  
  <pre><code>    &lt;form id="page0Form"&gt;
          &lt;table class="table table-striped table-hover" id="myGrid"&gt;&lt;/table&gt;    
      &lt;/form&gt;     
  </code></pre>
  
  <p><strong>Here is the javascript that sets up the datatable...</strong></p>
  
  <pre><code>    var jq = jQuery.noConflict();
  
      jq(document).ready(function () 
      {
          jq('#myGrid').dataTable({
              "ajax": "page0/tableData",
              "columns": [
                  {"data": "testvala"},
                  {"data": "testvalb"},
                  {"data": "testvalc"}
              ]
          });
      });
  </code></pre>
  
  <p><strong>Here is the JSON string returned by the AJAX call...</strong></p>
  
  <pre><code>    {"data":[{"testvala":"valuea0","testvalb":"valueb0","testvalc":"valuec0"},{"testvala":"valuea1","testvalb":"valueb1","testvalc":"valuec1"},{"testvala":"valuea2","testvalb":"valueb2","testvalc":"valuec2"}]}
  </code></pre>
  
  <p><strong>Here is the java class that contains the method returning the JSON string...</strong></p>
  
  <pre><code>    import com.fasterxml.jackson.databind.ObjectMapper;
      import java.io.IOException;
      import javax.servlet.http.HttpSession;
      import org.springframework.web.bind.annotation.RequestMapping;
      import org.springframework.web.bind.annotation.RequestMethod;
      import org.apache.log4j.Logger;
      import java.io.Serializable;
      import java.util.ArrayList;
      import java.util.HashMap;
      import javax.servlet.http.HttpServletRequest;
      import org.springframework.context.annotation.Scope;
      import org.springframework.stereotype.Controller;
      import org.springframework.ui.ModelMap;
      import org.springframework.web.bind.annotation.ResponseBody;
      import org.springframework.web.servlet.ModelAndView;
  
      @Controller
      @RequestMapping("/page0")
      @Scope("session")
      public class Page0Controller implements Serializable
      {
          private static final Logger LOG = Logger.getLogger("Page0Controller");
          private static final long serialVersionUID = 5024226983105965553L;
  
          //...........................................................    
          //...........................................................
          //...NOTE: this is the method that returns the JSON string...
          //...........................................................    
          //...........................................................    
          @RequestMapping(value = {"/tableData"}, method = RequestMethod.GET)    
          @ResponseBody    
          public String tableData(HttpServletRequest request, HttpSession session)
          {
              LOG.info("______________________tabledata______________________entering...");
  
              String testbeanlistjson = "";        
              ArrayList&lt;TestBean&gt; testBeanList = new ArrayList&lt;TestBean&gt;();        
              for (int i=0; i&lt;3; i++)
              {
                  testBeanList.add(new TestBean(
                      "valuea" + i,
                      "valueb" + i,
                      "valuec" + i
                  ));
              }
  
              try
              {
                  HashMap&lt;String, ArrayList&lt;TestBean&gt;&gt; data = new HashMap&lt;&gt;();                
                  data.put("data", testBeanList);    
                  ObjectMapper mapper = new ObjectMapper();          
                  testbeanlistjson = mapper.writeValueAsString(data); //(testBeanList);  //(data); //(testBeanList);
                  session.setAttribute("testbeanlistjson", testbeanlistjson);
              }
              catch (IOException e)
              {
                  LOG.error("______________________tabledata______________________Exception - e.getMessage()=" + e.getMessage(), e);
              }
  
              LOG.info("______________________tabledata______________________testbeanlistjson=" + String.valueOf(testbeanlistjson));
              //Gson gson = new Gson();
              //testbeanlistjson = gson.toJson(testBeanList);
  
              return testbeanlistjson;
          }        
  
          @RequestMapping(value = "", method = RequestMethod.GET)
          public ModelAndView page0(ModelMap model, HttpSession session)
          {
              LOG.info("____________________page0___________________entering...");
              return new ModelAndView("page0");
          }    
      }
  </code></pre>
  
  <p><strong>Here's the screen output...</strong></p>
  
  <p><img src="https://i.stack.imgur.com/EOZzk.jpg" alt="enter image description here"></p>
  
  <p>Here is the exception that occurs... </p>
  
  <p><img src="https://i.stack.imgur.com/CebK9.jpg" alt="enter image description here"></p>
  
  <p>Here is the jquery.dataTables.js method where the javascript exception occurs...        </p>
  
  <pre><code>    -
      -
      -
      /**
       * Draw the table for the first time, adding all required features
       *  @param {object} settings dataTables settings object
       *  @memberof DataTable#oApi
       */
      function _fnInitialise ( settings )
      {
          var i, iLen, iAjaxStart=settings.iInitDisplayStart;
          var columns = settings.aoColumns, column;
          var features = settings.oFeatures;
  
          /* Ensure that the table data is fully initialised */
          if ( ! settings.bInitialised ) {
              setTimeout( function(){ _fnInitialise( settings ); }, 200 );
              return;
          }
  
          /* Show the display HTML options */
          _fnAddOptionsHtml( settings );
  
          /* Build and draw the header / footer for the table */
          _fnBuildHead( settings );
          _fnDrawHead( settings, settings.aoHeader );
          _fnDrawHead( settings, settings.aoFooter );
  
          /* Okay to show that something is going on now */
          _fnProcessingDisplay( settings, true );
  
          /* Calculate sizes for columns */
          if ( features.bAutoWidth ) {
              _fnCalculateColumnWidths( settings );
          }
  
          for ( i=0, iLen=columns.length ; i&lt;iLen ; i++ ) {
              column = columns[i];
  
              if ( column.sWidth ) {
                  column.nTh.style.width = _fnStringToCss( column.sWidth );
              }
          }
  
          // If there is default sorting required - let's do it. The sort function
          // will do the drawing for us. Otherwise we draw the table regardless of the
          // Ajax source - this allows the table to look initialised for Ajax sourcing
          // data (show 'loading' message possibly)
          _fnReDraw( settings );
  
          // Server-side processing init complete is done by _fnAjaxUpdateDraw
          var dataSrc = _fnDataSource( settings );
          if ( dataSrc != 'ssp' ) {
              // if there is an ajax source load the data
              if ( dataSrc == 'ajax' ) {
                  _fnBuildAjax( settings, [], function(json) {
                      var aData = _fnAjaxDataSrc( settings, json );
  
                      // Got the data - add it to the table
                      for ( i=0 ; i&lt;aData.length ; i++ ) {
                          _fnAddData( settings, aData[i] );
                      }
  
                      // Reset the init display for cookie saving. We've already done
                      // a filter, and therefore cleared it before. So we need to make
                      // it appear 'fresh'
                      settings.iInitDisplayStart = iAjaxStart;
  
                      _fnReDraw( settings );
  
                      _fnProcessingDisplay( settings, false );
                      _fnInitComplete( settings, json );
                  }, settings );
              }
              else {
                  _fnProcessingDisplay( settings, false );
                  _fnInitComplete( settings );
              }
          }
      }
  
      -
      -
      -
  </code></pre>
  
  <p><strong>javascript libraries, etc...:</strong></p>
  
  <p>Bootstrap v3.3.2  </p>
  
  <p>DataTables v1.10.5  (org.webjars)</p>
  
  <p>jackson-core v2.3.4  (com.fasterxml.jackson.core)</p>
  
  <p>Jackson-databind  v2.3.4  (com.fasterxml.jackson.core)</p>
  
  <p>Spring MVC  v3.2.8</p>