title: Jquery Datatable Spring MVC
body: <p>Hi I am trying to  write a simple Jquery Datatable in Spring MVC , Listed below is the JSP Code and the Rest Controller Code . The error that I get in Chrome Console is also listed below</p>
  
  <p>JSP Code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  
  &lt;head lang="en"&gt;
  &lt;meta charset="utf-8"&gt;
  
  
  &lt;link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /&gt;
  &lt;srcipt type = "text/javascript" src= "https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" /&gt;
  &lt;script type= "text/javascript" src="${pageContext.request.contextPath}/static/AngularJSService/js/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
      $('#example').DataTable( {
          "processing": true,
          "serverSide": true,
          "ajax": {
              "url": "angularServiceCall/getActiveTeamData/adlkfadf",
              "type": "GET"
          },
          "columns": [
              { "data": "Name" },
              { "data": "Positon" },
              { "data": "Salary" },
              { "data": "office" },
              { "data": "Start_Date" }
          ]
      } );
  } );
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body &gt;
  
      &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Positon&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
                  &lt;th&gt;office&lt;/th&gt;
                  &lt;th&gt;Start date&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Positon&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
                  &lt;th&gt;office&lt;/th&gt;
                  &lt;th&gt;Start date&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Rest Controller Code</p>
  
  <pre><code>package com.sample.ui;
  
  import java.util.ArrayList;
  import java.util.HashMap;
  import java.util.List;
  import java.util.Map;
  import java.util.UUID;
  
  import org.apache.log4j.Logger;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.PathVariable;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  @Controller
  public class SpringMVCController {
  
      private static final Logger logger = Logger.getLogger(SpringMVCController.class);
  
      @RequestMapping(value = "/angularServiceCall", method=RequestMethod.GET)
      public String angularServiceCall() {
  
          logger.info("Log4j info is working");
          logger.warn("Log4j warn is working");       
          logger.debug("Log4j debug is working");
          logger.error("Log4j error is working");
          System.out.println("System out is working");
          return "angularJSngGrid";       
      }
  
      @RequestMapping(value = "/getDropDownData")
      public @ResponseBody Map&lt;String, String&gt; getDropDownData() {        
  
          Map&lt;String, String&gt; dropDownData = new HashMap&lt;String, String&gt;();
          dropDownData.put("Prime_Option", "Prime Option");
          dropDownData.put("Prime_Equity", "Prime Equity");
          dropDownData.put("Prime_Optimus", "Prime Optimus");     
  
          return dropDownData;    
      }
  
      @RequestMapping(value = "/getActiveTeamData/{name}")
      public @ResponseBody List&lt;Map&lt;String, Object&gt;&gt; getActiveTeamData(@PathVariable String name) {       
  
          List&lt;Map&lt;String, Object&gt;&gt; activeTeamMap = new ArrayList&lt;Map&lt;String,Object&gt;&gt;();
          for (int i = 0; i &lt; 4; i++) {
              Map&lt;String, Object&gt; dropDownData = new HashMap&lt;String, Object&gt;();
              dropDownData.put("Name", "Java Honk");
              dropDownData.put("Positon", "Architect");
              dropDownData.put("Salary", "$000,800");
              dropDownData.put("Office", "NY");
              dropDownData.put("Start_Date", "05/05/2010");
              activeTeamMap.add(dropDownData);
  
              dropDownData = new HashMap&lt;String, Object&gt;();
              dropDownData.put("Name", "Igor Vornovitsky");
              dropDownData.put("Positon", "Sr. Architect");
              dropDownData.put("Salary", "$400,800");
              dropDownData.put("Office", "NY");
              dropDownData.put("Start_Date", "05/05/2011");
              activeTeamMap.add(dropDownData);
  
              dropDownData = new HashMap&lt;String, Object&gt;();
              dropDownData.put("Name", "Ramesh Arrepu");
              dropDownData.put("Positon", "Architect");
              dropDownData.put("Salary", "$300,400");
              dropDownData.put("Office", "NY");
              dropDownData.put("Start_Date", "05/05/2009");
              activeTeamMap.add(dropDownData);
          }
  
          return activeTeamMap;   
      }
  
  
      @RequestMapping(value="/test", method=RequestMethod.GET)
      @ResponseBody
      public String testApp(){
          return UUID.randomUUID().toString();
      }
  
  }
  </code></pre>
  
  <p>Chrome Console shows Error</p>
  
  <pre><code>Uncaught TypeError: $(...).DataTable is not a function(anonymous function) @ angularServiceCall:14i @ jquery-1.12.0.min.js:2j.fireWith @ jquery-1.12.0.min.js:2n.extend.ready @ jquery-1.12.0.min.js:2K @ jquery-1.12.0.min.js`:2
  </code></pre>