2015-07-02 24 views
0

我想創建一個元數據存儲使用web gui搜索數據。該應用程序是在我的spring應用程序中使用ajax和datatables構建的。Ajax發佈彈簧mvc控制器刷新數據表

背景:

的搜索區域,如下所示:

==================================================================== 
= Start Date   = Table      search[ ] =     
= ___________________ = ------------------------------------- =   
= |2012-12-11 09:24:03| = -         - = 
=      = -         - = 
= Stop Date   = -         - =          
= ___________________ = -         - = 
= |2012-12-11 09:24:40| = -         - = 
=      = -         - =  
= Duration >   = -         - =          
= ___________________ = -         - = 
= |  00:4:40  | = -         - = 
=      = -         - = 
= ___________________ = -         - = 
= |  Search  | = ------------------------------------- = 
=      = showing 1 of 2000 entries  Page 1 = 
==================================================================== 

Search.js

var table; 
var searchpage = document.getElementsByTagName('base')[3].href; 

searchRecording=function() 
{ 
    var startDate = $('#startDate').data('date'); 
    var stopDate = $('#stopDate').data('date'); 
    var duration = $('#duration').data('date'); 

    $.ajax({ 
     "type": 'POST', 
     "url": searchpage, 
     "data": JSON.stringify({ 
      "startDate": startDate, 
      "stopDate": stopDate, 
      "duration": duration, 
     }), 
     success : function(response) { 
       alert(response); 
      }, 
      error : function(e) { 
       alert('Error: ' + e); 
      }, 
     contentType: "application/json", 
     dataType: "json" 
    }); 
} 

window.searchBtn.onclick = function() 
{ 
    return function() 
    { 
     searchRecording(); 
    } 
}(); 

var searchBtn = document.getElementById("searchBtn"); 

table = $('#table').DataTable({ 

     "bProcesing" : true, 
     "bServerSide" : true, 
     "bLenthChange" : false, 
     "lengthMenu": [[10, 15, 20, 25, 50], [10, 15, 20, 25, 50]], 
     "iDisplayLength" : 10, 
     "iDisplayStart": 0, 
     "sEcho":1, 
     "sAjaxSource":searchpage, 
     "fnServerData": function(searchpage, aoData, fnCallback) 
     { 
         $.ajax({ 
         "dataType" : 'json', 
         "type" : "POST", 
         "url" : searchpage, 
         "data" : aoData, 
         "success" : fnCallback 
         }); 
        }, 
     "columns": [ 
        { data: "id" }, 
        { ....Other Columns.... } , 
        ] 

    }); 

SearchController.java(控制器)

@RequestMapping(value = "/searchpage", method = RequestMethod.POST, produces = "application/json") 
    public @ResponseBody String showRecordings(
      @RequestParam (required=true) int sEcho, 
      @RequestParam (required=true) int iDisplayStart, 
      @RequestParam (required=true) int iDisplayLength  
      ) 
    { 

     System.out.print(sEcho+" "); 
     System.out.print(iDisplayStart+" "); 
     System.out.println(iDisplayLength+" "); 


     //String startDate = (String) data.get("startDate"); 
     //String stopDate = (String) data.get("stopDate"); 
     //String duration = (String) data.get("duration"); 


     DataTablesTO<Rec> dt = new DataTablesTO<Rec>(); 

     List<Rec> recs = recordingsService.getAllRecs(iDisplayStart, iDisplayLength); 
     Long size = recordingsService.getAllRecsSize(); 
     dt.setAaData(recs);      // This is the dataset reponse to client 
     dt.setiTotalDisplayRecords(size.intValue()); // the total data in db for datatables to calculate page no. and position 
     dt.setiTotalRecords(size.intValue());  // the total data in db for datatables to calculate page no. 
     dt.setsEcho(sEcho); 

     return toJson(dt); 
    } 

    private String toJson(DataTablesTO<?> dt) 
    { 
     ObjectMapper mapper = new ObjectMapper(); 

     try 
     { 
      return mapper.writeValueAsString(dt); 
     } 
     catch (JsonProcessingException e) 
     { 
      e.printStackTrace(); 
      return null; 
     } 
    } 

search.jsp的

表單包含引導datetimepickers並提交表單的按鈕

<button id="searchBtn" class="btn btn-primary" type="button">Search</button> 

問題:

如果能幫助我瞭解如何我會gratefult我應該將表格連接到表格嗎?舉例來說,如果我按搜索按鈕開始日期和結束日期被髮送到控制器,控制器搜索數據,並將結果返回到正在使用AJAX

  • 是我的做法正確的自動刷新表?
  • 我的代碼中是否有多餘的部分?
  • 我該如何將日期值傳遞給控制器​​?
  • 我按下搜索按鈕時應該如何傳遞數據表初始值?

在我收到以下錯誤的時刻:

org.springframework.web.bind.MissingServletRequestParameterException: Required int parameter 'sEcho' is not present 

誰能幫助?

感謝

回答

-1

你從服務器端從客戶端發送所需要的數據和獲取數據的方式是不同的。 您正在從客戶端發送一個對象,但在服務器端需要3個對象。 客戶端:

"data" : aoData, 

服務器端:

@RequestParam (required=true) int sEcho, 
@RequestParam (required=true) int iDisplayStart, 
@RequestParam (required=true) int iDisplayLength 

一種方法是,在服務器側獲得的DTO(數據傳輸對象),它只不過是一個包含多個字段的對象的數據對應於您發送的多個數據。 因此,獲取該自定義對象中的所有數據並從該對象中獲取單個數據。

當前你發送一個對象,但你必須要求3,其中第一個是一個數字。因此錯誤。

+0

謝謝,我明白服務器端,但我沒有完全得到JavaScript方面。我怎樣才能把多個變量,比如'sEcho','iDisplayStart','iDisplayLength'放在aoData對象中。 – QGA

+0

如何觸發「fnServerData」以使用ajax請求進行更新?我創建了一個'searchRecording'函數來發送一個ajax請求,但是我仍然沒有在你的javascript代碼中獲得完整的圖片 – QGA

+0

。該屬性應該是你想發送的。在服務器端代碼中創建一個具有相同結構和屬性名稱的java對象,並告訴您的方法期望來自客戶端的這種類型的數據 – suvartheec

相關問題