✨ Implement table partial update by Ajax

GongchuangSu · May 2, 2017 · fc58024 · fc58024
1 parent da5faed
commit fc58024
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/src/main/java/com/gongchuangsu/ssh/controller/TablesController.java b/src/main/java/com/gongchuangsu/ssh/controller/TablesController.java
@@ -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);

diff --git a/src/main/webapp/WEB-INF/views/editable-table.jsp b/src/main/webapp/WEB-INF/views/editable-table.jsp
@@ -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)
         		    {