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
誰能幫助?
感謝
謝謝,我明白服務器端,但我沒有完全得到JavaScript方面。我怎樣才能把多個變量,比如'sEcho','iDisplayStart','iDisplayLength'放在aoData對象中。 – QGA
如何觸發「fnServerData」以使用ajax請求進行更新?我創建了一個'searchRecording'函數來發送一個ajax請求,但是我仍然沒有在你的javascript代碼中獲得完整的圖片 – QGA
。該屬性應該是你想發送的。在服務器端代碼中創建一個具有相同結構和屬性名稱的java對象,並告訴您的方法期望來自客戶端的這種類型的數據 – suvartheec