[英]Spring boot Datatable returns data in JSON format but doesn't show them in the table
我正在嘗試按照指南在Spring中使用DataTables。 但是,當我請求該頁面時,它以JSON格式返回數據,並且未在HTML文件的表格中顯示它們。 到目前為止,這是我的代碼:我有一個User模型類:
@Entity
@Id
@GeneratedValue
@Column(name="id")
private long id;
@Column(name="name")
private String name;
@Column(name="last_name")
private String lastName;
@Column(name="email")
private String email;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
我創建了一個UsersRepository,如下所示:
@Repository("usersRepository")
public interface UserRepository extends JpaRepository<User, Long>{}
我有服務層和具有兩個功能的實現:getAllUsers和getUsersById()
這是html文件:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<table id="example" class="table display dt-responsive nowrap table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</tfoot>
</table>
</html>
datatable.js文件如下:
$(document).ready( function () {
var table = $('#example').DataTable({
"sAjaxSource": "/user/users",
"sAjaxDataProp": "",
"order": [[ 0, "asc" ]],
"aoColumns": [
{ "mData": "id"},
{ "mData": "name" },
{ "mData": "lastName" },
{ "mData": "email" }
]
})
});
這是@RestController:
@RestController
public class UserRestController {
@Autowired
private UserService userService;
@RequestMapping(path="user/users", method=RequestMethod.GET)
public List<User> getAllUsers(){
return userService.getAllUsers();
}
@RequestMapping(value = "user/users/{id}", method = RequestMethod.GET)
public User getUserById(@PathVariable("id") long id){
return userService.getUserById(id);
}
}
當我轉到localhost:8080 / user / users時,它返回數據庫中的用戶,而不是表中的用戶。 有什么我想念的東西嗎? 任何幫助,將不勝感激
檢查兩件事:您正在Datatable中調用/ employees,請檢查Datatable調用部分在body標記之前的HTML底部。 下面是正在運行的經過測試的代碼。
src / main / webapp中的test.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="table display dt-responsive nowrap table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</tfoot>
</table>
<script>
/*$(document).ready(function() {
$('#example').DataTable();
} );*/
$(document).ready( function () {
var table = $('#example').DataTable({
"sAjaxSource": "/user/users",
"sAjaxDataProp": "",
"order": [[ 0, "asc" ]],
"aoColumns": [
{ "mData": "id"},
{ "mData": "name" },
{ "mData": "lastName" },
{ "mData": "email" }
]
})
});
</script>
</body>
</html>
UserRestController
package com.vaibs.controller;
import com.vaibs.jpaExample.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
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.RestController;
import java.util.List;
/**
* Created by polo on 26-09-2017.
*/
@RestController
public class UserRestController {
@Autowired
private UserService userService;
@RequestMapping(path = "user/users", method = RequestMethod.GET)
public List<User> getAllUsers () {
return userService.getAllUsers ();
}
@RequestMapping(value = "user/users/{id}", method = RequestMethod.GET)
public User getUserById (@PathVariable("id") long id) {
return userService.getUserById (id);
}
}
UserService [模擬]:
package com.vaibs.controller;
import com.vaibs.jpaExample.entity.User;
import org.springframework.stereotype.Component;
import java.util.ArrayList;
import java.util.List;
/**
* Created by polo on 26-09-2017.
*/
@Component
public class UserService {
ArrayList<User> userList = new ArrayList<User> () {{
User u1 = new User ();
u1.setId (1L);
u1.setName ("Vaibhav");
u1.setLastName ("Khatke");
u1.setEmail ("vaibs@outlook.com");
User u2 = new User ();
u2.setId (2L);
u2.setName ("Saurabh");
u2.setLastName ("Nakhe");
u2.setEmail ("saurabh@outlook.com");
User u3 = new User ();
u3.setId (3L);
u3.setName ("Mandar@outlook.com");
u3.setLastName ("Jain");
u3.setEmail ("mandar@outlook.com");
add (u1);
add (u2);
add (u3);
}};
public List<User> getAllUsers () {
return userList;
}
public User getUserById (long id) {
for (User user : userList) {
if (user.getId () == id) {
return user;
}
}
return null;
}
}
用戶:com.vaibs.jpaExample.entity包;
import javax.persistence.Entity;
import javax.persistence.Id;
/**
* Created by polo on 26-09-2017.
*/
@Entity
public class User {
@Id
private long id;
private String name;
private String lastName;
private String email;
public long getId () {
return id;
}
public void setId (long id) {
this.id = id;
}
public String getName () {
return name;
}
public void setName (String name) {
this.name = name;
}
public String getLastName () {
return lastName;
}
public void setLastName (String lastName) {
this.lastName = lastName;
}
public String getEmail () {
return email;
}
public void setEmail (String email) {
this.email = email;
}
}
上面的代碼示例可以是帶有REST / Jquery / Datatable的Spring-boot / JPA的一個很好的示例
如果您的問題已解決,請回覆。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.