2016-02-12 87 views
0

嗨我想在Spring MVC中編寫一個簡單的Jquery Datatable,下面列出了JSP代碼和其餘控制器代碼。我在Chrome控制檯得到的錯誤也列在下面Jquery Datatable Spring MVC

JSP代碼

<!DOCTYPE html> 
<html > 

<head lang="en"> 
<meta charset="utf-8"> 


<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /> 
<srcipt type = "text/javascript" src= "https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" /> 
<script type= "text/javascript" src="${pageContext.request.contextPath}/static/AngularJSService/js/jquery-1.12.0.min.js"></script> 
<script type="text/javascript"> 

$(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" } 
     ] 
    }); 
}); 

</script> 
</head> 

<body > 

    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Positon</th> 
       <th>Salary</th> 
       <th>office</th> 
       <th>Start date</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Positon</th> 
       <th>Salary</th> 
       <th>office</th> 
       <th>Start date</th> 
      </tr> 
     </tfoot> 
    </table> 

</body> 

</html> 

休息控制器代碼

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<String, String> getDropDownData() {   

     Map<String, String> dropDownData = new HashMap<String, String>(); 
     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<Map<String, Object>> getActiveTeamData(@PathVariable String name) {  

     List<Map<String, Object>> activeTeamMap = new ArrayList<Map<String,Object>>(); 
     for (int i = 0; i < 4; i++) { 
      Map<String, Object> dropDownData = new HashMap<String, Object>(); 
      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<String, Object>(); 
      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<String, Object>(); 
      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(); 
    } 

} 

瀏覽器控制檯顯示錯誤

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 

回答

0
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) 
{ 
    return { 
     "iStart":   oSettings._iDisplayStart, 
     "iEnd":   oSettings.fnDisplayEnd(), 
     "iLength":  oSettings._iDisplayLength, 
     "iTotal":   oSettings.fnRecordsTotal(), 
     "iFilteredTotal": oSettings.fnRecordsDisplay(), 
     "iPage":   oSettings._iDisplayLength === -1 ? 
      0 : Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength), 
     "iTotalPages": oSettings._iDisplayLength === -1 ? 
      0 : Math.ceil(oSettings.fnRecordsDisplay()/oSettings._iDisplayLength) 
    }; 
}; 
jQuery(document).ready(function($) { 
    $("#eventEndDate").datepicker(); 
    $("#eventStartDate").datepicker(); 
    $("#submitNewEvent").on("click", function(e) { 
     e.preventDefault(); 
     $.ajax({ 
      dataType : 'text', 
      type: 'post', 
      success : function(string) { 
       alert('added'); 

      }, 
      url : 'addEventDB', 
      data : ({ 
       eventName : $("#eventName").val(), 
       eventDesc : $("#eventDesc").val(), 
       eventStartDate: $("#eventStartDate").val(), 
       eventEndDate: $("#eventEndDate").val(), 
       eventCouponCode: $("#eventCouponCode").val(), 

      }) 
     }); 
    }); 



*******************Code for jEditable.js***** 
/* 
* Jeditable - jQuery in place edit plugin 
* 
* Copyright (c) 2006-2009 Mika Tuupola, Dylan Verheul 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Project home: 
* http://www.appelsiini.net/projects/jeditable 
* 
* Based on editable by Dylan Verheul <dylan_at_dyve.net>: 
* http://www.dyve.net/jquery/?editable 
* 
*/ 

/** 
    * Version 1.7.1 
    * 
    * ** means there is basic unit tests for this parameter. 
    * 
    * @name Jeditable 
    * @type jQuery 
    * @param String target    (POST) URL or function to send edited content to ** 
    * @param Hash options   additional options 
    * @param String options[method] method to use to send edited content (POST or PUT) ** 
    * @param Function options[callback] Function to run after submitting edited content ** 
    * @param String options[name]  POST parameter name of edited content 
    * @param String options[id]  POST parameter name of edited div id 
    * @param Hash options[submitdata] Extra parameters to send when submitting edited content. 
    * @param String options[type]  text, textarea or select (or any 3rd party input type) ** 
    * @param Integer options[rows]  number of rows if using textarea ** 
    * @param Integer options[cols]  number of columns if using textarea ** 
    * @param Mixed options[height] 'auto', 'none' or height in pixels ** 
    * @param Mixed options[width]  'auto', 'none' or width in pixels ** 
    * @param String options[loadurl] URL to fetch input content before editing ** 
    * @param String options[loadtype] Request type for load url. Should be GET or POST. 
    * @param String options[loadtext] Text to display while loading external content. 
    * @param Mixed options[loaddata] Extra parameters to pass when fetching content before editing. 
    * @param Mixed options[data]  Or content given as paramameter. String or function.** 
    * @param String options[indicator] indicator html to show when saving 
    * @param String options[tooltip] optional tooltip text via title attribute ** 
    * @param String options[event]  jQuery event such as 'click' of 'dblclick' ** 
    * @param String options[submit] submit button value, empty means no button ** 
    * @param String options[cancel] cancel button value, empty means no button ** 
    * @param String options[cssclass] CSS class to apply to input form. 'inherit' to copy from parent. ** 
    * @param String options[style]  Style to apply to input form 'inherit' to copy from parent. ** 
    * @param String options[select] true or false, when true text is highlighted ?? 
    * @param String options[placeholder] Placeholder text or html to insert when element is empty. ** 
    * @param String options[onblur] 'cancel', 'submit', 'ignore' or function ?? 
    *    
    * @param Function options[onsubmit] function(settings, original) { ... } called before submit 
    * @param Function options[onreset] function(settings, original) { ... } called before reset 
    * @param Function options[onerror] function(settings, original, xhr) { ... } called on error 
    *    
    * @param Hash options[ajaxoptions] jQuery Ajax options. See docs.jquery.com. 
    *    
    */ 

(function($) { 

    $.fn.editable = function(target, options) { 

     if ('disable' == target) { 
      $(this).data('disabled.editable', true); 
      return; 
     } 
     if ('enable' == target) { 
      $(this).data('disabled.editable', false); 
      return; 
     } 
     if ('destroy' == target) { 
      $(this) 
       .unbind($(this).data('event.editable')) 
       .removeData('disabled.editable') 
       .removeData('event.editable'); 
      return; 
     } 

     var settings = $.extend({}, $.fn.editable.defaults, {target:target}, options); 

     /* setup some functions */ 
     var plugin = $.editable.types[settings.type].plugin || function() { }; 
     var submit = $.editable.types[settings.type].submit || function() { }; 
     var buttons = $.editable.types[settings.type].buttons 
        || $.editable.types['defaults'].buttons; 
     var content = $.editable.types[settings.type].content 
        || $.editable.types['defaults'].content; 
     var element = $.editable.types[settings.type].element 
        || $.editable.types['defaults'].element; 
     var reset = $.editable.types[settings.type].reset 
        || $.editable.types['defaults'].reset; 
     var callback = settings.callback || function() { }; 
     var onedit = settings.onedit || function() { }; 
     var onsubmit = settings.onsubmit || function() { }; 
     var onreset = settings.onreset || function() { }; 
     var onerror = settings.onerror || reset; 

     /* show tooltip */ 
     if (settings.tooltip) { 
      $(this).attr('title', settings.tooltip); 
     } 

     settings.autowidth = 'auto' == settings.width; 
     settings.autoheight = 'auto' == settings.height; 

     return this.each(function() { 

      /* save this to self because this changes when scope changes */ 
      var self = this; 

      /* inlined block elements lose their width and height after first edit */ 
      /* save them for later use as workaround */ 
      var savedwidth = $(self).width(); 
      var savedheight = $(self).height(); 

      /* save so it can be later used by $.editable('destroy') */ 
      $(this).data('event.editable', settings.event); 

      /* if element is empty add something clickable (if requested) */ 
      if (!$.trim($(this).html())) { 
       $(this).html(settings.placeholder); 
      } 

      $(this).bind(settings.event, function(e) { 

       /* abort if disabled for this element */ 
       if (true === $(this).data('disabled.editable')) { 
        return; 
       } 

       /* prevent throwing an exeption if edit field is clicked again */ 
       if (self.editing) { 
        return; 
       } 

       /* abort if onedit hook returns false */ 
       if (false === onedit.apply(this, [settings, self])) { 
        return; 
       } 

       /* prevent default action and bubbling */ 
       e.preventDefault(); 
       e.stopPropagation(); 

       /* remove tooltip */ 
       if (settings.tooltip) { 
        $(self).removeAttr('title'); 
       } 

       /* figure out how wide and tall we are, saved width and height */ 
       /* are workaround for http://dev.jquery.com/ticket/2190 */ 
       if (0 == $(self).width()) { 
        //$(self).css('visibility', 'hidden'); 
        settings.width = savedwidth; 
        settings.height = savedheight; 
       } else { 
        if (settings.width != 'none') { 
         settings.width = 
          settings.autowidth ? $(self).width() : settings.width; 
        } 
        if (settings.height != 'none') { 
         settings.height = 
          settings.autoheight ? $(self).height() : settings.height; 
        } 
       } 
       //$(this).css('visibility', ''); 

       /* remove placeholder text, replace is here because of IE */ 
       if ($(this).html().toLowerCase().replace(/(;|")/g, '') == 
        settings.placeholder.toLowerCase().replace(/(;|")/g, '')) { 
         $(this).html(''); 
       } 

       self.editing = true; 
       self.revert  = $(self).html(); 
       $(self).html(''); 

       /* create the form object */ 
       var form = $('<form />'); 

       /* apply css or style or both */ 
       if (settings.cssclass) { 
        if ('inherit' == settings.cssclass) { 
         form.attr('class', $(self).attr('class')); 
        } else { 
         form.attr('class', settings.cssclass); 
        } 
       } 

       if (settings.style) { 
        if ('inherit' == settings.style) { 
         form.attr('style', $(self).attr('style')); 
         /* IE needs the second line or display wont be inherited */ 
         form.css('display', $(self).css('display'));     
        } else { 
         form.attr('style', settings.style); 
        } 
       } 

       /* add main input element to form and store it in input */ 
       var input = element.apply(form, [settings, self]); 

       /* set input content via POST, GET, given data or existing value */ 
       var input_content; 

       if (settings.loadurl) { 
        var t = setTimeout(function() { 
         input.disabled = true; 
         content.apply(form, [settings.loadtext, settings, self]); 
        }, 100); 

        var loaddata = {}; 
        loaddata[settings.id] = self.id; 
        if ($.isFunction(settings.loaddata)) { 
         $.extend(loaddata, settings.loaddata.apply(self, [self.revert, settings])); 
        } else { 
         $.extend(loaddata, settings.loaddata); 
        } 
        $.ajax({ 
         type : settings.loadtype, 
         url : settings.loadurl, 
         data : loaddata, 
         async : false, 
         success: function(result) { 
          window.clearTimeout(t); 
          input_content = result; 
          input.disabled = false; 
         } 
        }); 
       } else if (settings.data) { 
        input_content = settings.data; 
        if ($.isFunction(settings.data)) { 
         input_content = settings.data.apply(self, [self.revert, settings]); 
        } 
       } else { 
        input_content = self.revert; 
       } 
       content.apply(form, [input_content, settings, self]); 

       input.attr('name', settings.name); 

       /* add buttons to the form */ 
       buttons.apply(form, [settings, self]); 

       /* add created form to self */ 
       $(self).append(form); 

       /* attach 3rd party plugin if requested */ 
       plugin.apply(form, [settings, self]); 

       /* focus to first visible form element */ 
       $(':input:visible:enabled:first', form).focus(); 

       /* highlight input contents when requested */ 
       if (settings.select) { 
        input.select(); 
       } 

       /* discard changes if pressing esc */ 
       input.keydown(function(e) { 
        if (e.keyCode == 27) { 
         e.preventDefault(); 
         //self.reset(); 
         reset.apply(form, [settings, self]); 
        } 
       }); 

       /* discard, submit or nothing with changes when clicking outside */ 
       /* do nothing is usable when navigating with tab */ 
       var t; 
       if ('cancel' == settings.onblur) { 
        input.blur(function(e) { 
         /* prevent canceling if submit was clicked */ 
         t = setTimeout(function() { 
          reset.apply(form, [settings, self]); 
         }, 500); 
        }); 
       } else if ('submit' == settings.onblur) { 
        input.blur(function(e) { 
         /* prevent double submit if submit was clicked */ 
         t = setTimeout(function() { 
          form.submit(); 
         }, 200); 
        }); 
       } else if ($.isFunction(settings.onblur)) { 
        input.blur(function(e) { 
         settings.onblur.apply(self, [input.val(), settings]); 
        }); 
       } else { 
        input.blur(function(e) { 
         /* TODO: maybe something here */ 
        }); 
       } 

       form.submit(function(e) { 

        if (t) { 
         clearTimeout(t); 
        } 

        /* do no submit */ 
        e.preventDefault(); 

        /* call before submit hook. */ 
        /* if it returns false abort submitting */      
        if (false !== onsubmit.apply(form, [settings, self])) { 
         /* custom inputs call before submit hook. */ 
         /* if it returns false abort submitting */ 
         if (false !== submit.apply(form, [settings, self])) { 

          /* check if given target is function */ 
          if ($.isFunction(settings.target)) { 
           var str = settings.target.apply(self, [input.val(), settings]); 
           $(self).html(str); 
           self.editing = false; 
           callback.apply(self, [self.innerHTML, settings]); 
           /* TODO: this is not dry */        
           if (!$.trim($(self).html())) { 
            $(self).html(settings.placeholder); 
           } 
          } else { 
           /* add edited content and id of edited element to POST */ 
           var submitdata = {}; 
           submitdata[settings.name] = input.val(); 
           submitdata[settings.id] = self.id; 
           /* add extra data to be POST:ed */ 
           if ($.isFunction(settings.submitdata)) { 
            $.extend(submitdata, settings.submitdata.apply(self, [self.revert, settings])); 
           } else { 
            $.extend(submitdata, settings.submitdata); 
           } 

           /* quick and dirty PUT support */ 
           if ('PUT' == settings.method) { 
            submitdata['_method'] = 'put'; 
           } 

           /* show the saving indicator */ 
           $(self).html(settings.indicator); 

           /* defaults for ajaxoptions */ 
           var ajaxoptions = { 
            type : 'POST', 
            data : submitdata, 
            dataType: 'html', 
            url  : settings.target, 
            success : function(result, status) { 
             if (ajaxoptions.dataType == 'html') { 
             $(self).html(result); 
             } 
             self.editing = false; 
             callback.apply(self, [result, settings]); 
             if (!$.trim($(self).html())) { 
              $(self).html(settings.placeholder); 
             } 
            }, 
            error : function(xhr, status, error) { 
             onerror.apply(form, [settings, self, xhr]); 
            } 
           }; 

           /* override with what is given in settings.ajaxoptions */ 
           $.extend(ajaxoptions, settings.ajaxoptions); 
           $.ajax(ajaxoptions);   

          } 
         } 
        } 

        /* show tooltip again */ 
        $(self).attr('title', settings.tooltip); 

        return false; 
       }); 
      }); 

      /* privileged methods */ 
      this.reset = function(form) { 
       /* prevent calling reset twice when blurring */ 
       if (this.editing) { 
        /* before reset hook, if it returns false abort reseting */ 
        if (false !== onreset.apply(form, [settings, self])) { 
         $(self).html(self.revert); 
         self.editing = false; 
         if (!$.trim($(self).html())) { 
          $(self).html(settings.placeholder); 
         } 
         /* show tooltip again */ 
         if (settings.tooltip) { 
          $(self).attr('title', settings.tooltip);     
         } 
        }      
       } 
      };    
     }); 

    }; 


    $.editable = { 
     types: { 
      defaults: { 
       element : function(settings, original) { 
        var input = $('<input type="hidden"></input>');     
        $(this).append(input); 
        return(input); 
       }, 
       content : function(string, settings, original) { 
        $(':input:first', this).val(string); 
       }, 
       reset : function(settings, original) { 
        original.reset(this); 
       }, 
       buttons : function(settings, original) { 
        var form = this; 
        if (settings.submit) { 
         /* if given html string use that */ 
         if (settings.submit.match(/>$/)) { 
          var submit = $(settings.submit).click(function() { 
           if (submit.attr("type") != "submit") { 
            form.submit(); 
           } 
          }); 
         /* otherwise use button with given string as text */ 
         } else { 
          var submit = $('<button type="submit" />'); 
          submit.html(settings.submit);        
         } 
         $(this).append(submit); 
        } 
        if (settings.cancel) { 
         /* if given html string use that */ 
         if (settings.cancel.match(/>$/)) { 
          var cancel = $(settings.cancel); 
         /* otherwise use button with given string as text */ 
         } else { 
          var cancel = $('<button type="cancel" />'); 
          cancel.html(settings.cancel); 
         } 
         $(this).append(cancel); 

         $(cancel).click(function(event) { 
          //original.reset(); 
          if ($.isFunction($.editable.types[settings.type].reset)) { 
           var reset = $.editable.types[settings.type].reset;                 
          } else { 
           var reset = $.editable.types['defaults'].reset;         
          } 
          reset.apply(form, [settings, original]); 
          return false; 
         }); 
        } 
       } 
      }, 
      text: { 
       element : function(settings, original) { 
        var input = $('<input />'); 
        if (settings.width != 'none') { input.width(settings.width); } 
        if (settings.height != 'none') { input.height(settings.height); } 
        /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */ 
        //input[0].setAttribute('autocomplete','off'); 
        input.attr('autocomplete','off'); 
        $(this).append(input); 
        return(input); 
       } 
      }, 
      textarea: { 
       element : function(settings, original) { 
        var textarea = $('<textarea />'); 
        if (settings.rows) { 
         textarea.attr('rows', settings.rows); 
        } else if (settings.height != "none") { 
         textarea.height(settings.height); 
        } 
        if (settings.cols) { 
         textarea.attr('cols', settings.cols); 
        } else if (settings.width != "none") { 
         textarea.width(settings.width); 
        } 
        $(this).append(textarea); 
        return(textarea); 
       } 
      }, 
      select: { 
       element : function(settings, original) { 
        var select = $('<select />'); 
        $(this).append(select); 
        return(select); 
       }, 
       content : function(data, settings, original) { 
        /* If it is string assume it is json. */ 
        if (String == data.constructor) {  
         eval ('var json = ' + data); 
        } else { 
        /* Otherwise assume it is a hash already. */ 
         var json = data; 
        } 
        for (var key in json) { 
         if (!json.hasOwnProperty(key)) { 
          continue; 
         } 
         if ('selected' == key) { 
          continue; 
         } 
         var option = $('<option />').val(key).append(json[key]); 
         $('select', this).append(option);  
        }      
        /* Loop option again to set selected. IE needed this... */ 
        $('select', this).children().each(function() { 
         if ($(this).val() == json['selected'] || 
          $(this).text() == $.trim(original.revert)) { 
           $(this).attr('selected', 'selected'); 
         } 
        }); 
       } 
      } 
     }, 

     /* Add new input type */ 
     addInputType: function(name, input) { 
      $.editable.types[name] = input; 
     } 
    }; 

    // publicly accessible defaults 
    $.fn.editable.defaults = { 
     name  : 'value', 
     id   : 'id', 
     type  : 'text', 
     width  : 'auto', 
     height  : 'auto', 
     event  : 'click.editable', 
     onblur  : 'cancel', 
     loadtype : 'GET', 
     loadtext : 'Loading...', 
     placeholder: 'Click to edit', 
     loaddata : {}, 
     submitdata : {}, 
     ajaxoptions: {} 
    }; 

})(jQuery); 
+0

什麼是你的函數中的aoData,如果我使用這個控制檯會抱怨aoData – developer2015

+0

它是由服務器以JSON格式發回的數據。數據表格除了這種格式。我在最近實施的家用筆記本電腦上有一個工作示例。我將回家並向您發佈代碼。我的代碼支持分頁,編輯數據,頁面重繪 – user3509208

+0

您可以請儘快發佈代碼 – developer2015

0

添加之前的jQuery庫使用DataTable插件的庫(更改導入的順序)。這將解決您的問題。

+0

這是否仍然看到相同的錯誤 – developer2015

-1

對不起我可怕的英語!我昨天遇到同樣的錯誤,我嘗試這種方法,然後我解決它maybe you can have a try

+1

在這裏發佈您的答案。不是一個鏈接。 –

+0

//嘗試身體的盡頭 –

0

我瘦你越來越DOM的問題。在HTML之後過去這段代碼。

<script> 
$(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" } 
     ] 
    }); 
}); 
</script> 

希望這對你有所幫助。