Spring Boot Datatable以JSON格式返回数据，但未在表中显示它们

Question

我正在尝试按照指南在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时，它返回数据库中的用户，而不是表中的用户。 有什么我想念的东西吗？ 任何帮助，将不胜感激

Answer 1

检查两件事：您正在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的一个很好的示例

如果您的问题已解决，请回覆。

Spring Boot Datatable以JSON格式返回数据，但未在表中显示它们

问题描述

1 个解决方案

解决方案1
0 2017-09-26 15:02:44

Spring Boot Datatable以JSON格式返回数据，但未在表中显示它们

问题描述

1 个解决方案

解决方案1 0 2017-09-26 15:02:44

解决方案1
0 2017-09-26 15:02:44