Skip to content
Permalink
Browse files

Implement table partial update by Ajax

  • Loading branch information...
GongchuangSu committed May 2, 2017
1 parent da5faed commit fc580249da6c17e38e7b001e64099c23e18b05e5
@@ -49,9 +49,10 @@ public ModelAndView basicTable(HttpServletRequest request,
@RequestMapping(value = "editable-table", method = {RequestMethod.POST,RequestMethod.GET})
public ModelAndView editTable(HttpServletRequest request,
HttpServletResponse response) throws IOException{
String method = request.getParameter("method");
String save_method = request.getParameter("save_method");
String id = request.getParameter("id");
String method = request.getParameter("method"); // 操作方式:查询/删除Book
String save_method = request.getParameter("save_method"); // 保存方式: 更新/添加Book
String id = request.getParameter("id"); // Book的id
/* 根据保存方式(save_method)的不同执行不同的操作 */
if("add".equals(save_method)){
Book bk = new Book();
bk.setIsbn(request.getParameter("isbn"));
@@ -69,15 +70,20 @@ public ModelAndView editTable(HttpServletRequest request,
bk.setPrice(Double.parseDouble(request.getParameter("price")));
bookService.updateBook(bk);
}
if("getBookById".equals(method)){
/* 根据操作方式(method)的不同执行不同的操作 */
if("getBookById".equals(method)){ // 根据id查询Book
response.setContentType("application/json");
String json = JSONArray.fromObject(bookService.getBookById(Integer.parseInt(id))).toString();
response.getWriter().write(json);
return null;
}else if("deleteBookById".equals(method)){
}else if("deleteBookById".equals(method)){ // 根据id删除Book
bookService.deleteBookById(Integer.parseInt(id));
return null;
}else{
}else if("example".equals(method)){
String json = "{\"data\":" + JSONArray.fromObject(bookService.getAllBooks()).toString() +"}";
response.getWriter().write(json);
return null;
}else{ // 查询所有的Book
ModelAndView mv = new ModelAndView("editable-table");
List<Book> bookList = bookService.getAllBooks();
mv.addObject("bookList", bookList);
@@ -44,25 +44,6 @@
<th style="width: 125px;">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${bookList}" var="book">
<tr>
<td>${book.isbn}</td>
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.category}</td>
<td>${book.price}</td>
<td>
<button class="btn btn-warning btn-sm" onclick="edit_book(${book.id});">
<i class="glyphicon glyphicon-pencil"></i>修改
</button>
<button class="btn btn-danger btn-sm" onclick="delete_book(${book.id});">
<i class="glyphicon glyphicon-remove"></i>删除
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!--/.col-xs-12.col-sm-9-->
@@ -170,12 +151,34 @@
});
/* For DataTables */
var table;
$(document).ready(function() {
$('#example').DataTable({
table = $('#example').DataTable({
"scrollX":true, /* 启用水平滚动 */
"language":{ /* 中文版 */
"url":"<%=request.getContextPath()%>/static/DataTables/language/Chinese.json"
}
},
"ajax":{
url:'editable-table?method=example'
},
"columns":[
{"data": "isbn"},
{"data": "title"},
{"data": "author"},
{"data": "category"},
{"data": "price"},
{"data": null}
],
"columnDefs": [{
targets: 5,
render: function(data, type, row, meta) {
return '<td><button class="btn btn-warning btn-sm" onclick="edit_book('+row.id+');">'
+'<i class="glyphicon glyphicon-pencil"></i>修改</button>'
+'&nbsp&nbsp'
+'<button class="btn btn-danger btn-sm" onclick="delete_book('+row.id+');">'
+'<i class="glyphicon glyphicon-remove"></i>删除</button><td>'
}
}]
});
});
@@ -230,8 +233,9 @@
type: "POST",
data: $('#form').serialize(),
success: function(data){
$('#modal_form').modal('hide'); //if success close modal and reload ajax table
location.reload(); // for reload a page
//if success, close modal and reload ajax table
$('#modal_form').modal('hide');
table.ajax.reload();
},
error: function(jqXHR, textStatus, errorThrown){
if(save_method == 'add')
@@ -250,7 +254,7 @@
type: "POST",
success: function(data)
{
location.reload();
table.ajax.reload(); // reload ajax table
},
error: function(jqXHR, textStatus, errorThrown)
{

0 comments on commit fc58024

Please sign in to comment.
You can’t perform that action at this time.