SpringブートDatatableはJSON形式のデータを返しますが、テーブルに表示しません

チュートリアルの後でSpringでDataTableを使用しようとしています。しかし、私がページをリクエストすると、データはJSON形式で返され、HTMLファイルの表には表示されません。これは、これまでの私のコードです：私はUserモデルクラスを持っている：SpringブートDatatableはJSON形式のデータを返しますが、テーブルに表示しません

@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>{}

私はサービス層と2つの機能を有している実装を持っています： 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>

$(document).ready(function() { 
var table = $('#example').DataTable({ 
     "sAjaxSource": "/user/users", 
     "sAjaxDataProp": "", 
     "order": [[ 0, "asc" ]], 
     "aoColumns": [ 
      { "mData": "id"}, 
      { "mData": "name" }, 
       { "mData": "lastName" }, 
       { "mData": "email" } 

     ] 
}) 
});

そして、これは@RestControllerです：：次のように

datatable.jsファイルがある

@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); 
}

}

私はローカルホストに行くとき：8080 /ユーザー/ユーザーが返しますデータベース内のユーザーはテーブルには存在しません。足りないことはありますか？どんな助けもありがたいです

出典

2017-09-26 Anonymous

あなたのコードは、チェックして対応できる2つのポイントで大丈夫と思われます。ありがとう – Vaibs

私は応答を取得しますが、データテーブルにはありません。ユーザーサイトには、そのサイトのデザインが表示されません。 –

投稿したコードはあなたのコードだけです。 – Vaibs

2つのことを確認してください1：あなたはDatatableで電話をしています.Datatableの呼び出し元がbodyタグの前のHTMLの下部にあることを確認してください。テスト済みのコードの下にあります。 SRC /メイン/ 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 ("[email protected]"); 
     User u2 = new User(); 
     u2.setId (2L); 
     u2.setName ("Saurabh"); 
     u2.setLastName ("Nakhe"); 
     u2.setEmail ("[email protected]"); 
     User u3 = new User(); 
     u3.setId (3L); 
     u3.setName ("[email protected]"); 
     u3.setLastName ("Jain"); 
     u3.setEmail ("[email protected]"); 


     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。エンティティ;コードサンプルの上

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; 
    } 
}

あなたの問題を解決してしまった場合

のDataTable/REST/jQueryを使って春ブーツ/ JPAの良い例することができ、バックpingを実行してください。

出典

2017-09-26 15:02:44 Vaibs

ありがとうございます。 {"id"：1、 "name"： "Sarah"、 "lastName"： "User"、 "email"： "[email protected]"}、{"id" ：2、 "name"： "User2"、 "lastName"： "User3"、 "email"： "[email protected]"] データテーブルには表示されません。 –

私は実際にリクエストで警告を受け取ります。リソースはドキュメントとして解釈されますが、MIMEタイプapplication/jsonで転送されます。 –

SpringブートDatatableはJSON形式のデータを返しますが、テーブルに表示しません

答えて

関連する問題