При реализации таблицы данных в Spring Boot MVC Project с Thymeleaf никакие данные не заполняются в таблице данных - PullRequest
Новая
       19

При реализации таблицы данных в Spring Boot MVC Project с Thymeleaf никакие данные не заполняются в таблице данных

0 голосов
/ 08 января 2019

Мой сервис, контроллер и просмотры:

открытый класс LoadDataService {

public List<Employee> getEmployeeList(){
    List<Employee> employeeList = new ArrayList<Employee>();
    Employee employee1 = new Employee("Sridharan","Junior Blogger","5000","India");
    Employee employee2 = new Employee("Arul Raj","Senior Blogger","105000","China");
    Employee employee3 = new Employee("Priya","Associate","21000","Australia");
    Employee employee4 = new Employee("Sam","Associate","20030","Australia");
    Employee employee5 = new Employee("Ram","Associate","2020","Australia")
    employeeList.add(employee5);
    employeeList.add(employee4);
    employeeList.add(employee3);
    employeeList.add(employee2);
    employeeList.add(employee1);
    return employeeList;
}
@Override
public String toString() {
    return "LoadDataService [getClass()=" + getClass() + ", hashCode()=" + hashCode() + ", toString()="
            + super.toString() + "]";
}

}

Класс контроллера:

@ контроллер открытый класс JQueryDatatableController {
private static final Logger logger = LoggerFactory.getLogger (JQueryDatatableController.class); 

@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView home(Locale locale, Model model) throws JsonGenerationException, JsonMappingException, IOException {
    logger.info("Welcome home! The client locale is {}.", locale);

    LoadDataService dataService = new LoadDataService();
    ObjectMapper mapper = new ObjectMapper();       

    ModelAndView mav=new ModelAndView();
    mav.addObject("employeeList", mapper.writeValueAsString(dataService.getEmployeeList()));        
    mav.setViewName("index");

    return mav;
}

}

Интеграция таблиц данных в HTML-страницу чабреца: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Datables Demo</title>
        <script type="text/javascript" th:src="@{js/jquery-1.12.1.min.js}" ></script>
        <script th:src="@{js/jquery.dataTables.js}"></script>
    
     <!--CSS StyleSheet -->
     <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/> 
    <link rel="stylesheet" type="text/css" th:href="@{/css/jquery.dataTables.css}">
   
</head>
     
<body>
<div>
<img class="dataTableExample" th:src="@{/images/JQueryDatatableandSpringMVC.png}">
</div>
<table id="example" class="display" cellspacing="0" width="100%" style="overflow-x:auto">
				<thead>
					<tr>
						<th>Name</th>
						<th>Designation</th>
						<th>Salary</th>
						<th>Country</th>
					</tr>
				</thead>
			</table>
			

<script th:inline="javascript">

$(document).ready(function () {
	 
    $('#example').DataTable({
        "searching": true,
        "serverSide":false,
        "paging":true,
        "sAjaxSource":"${employeeList}",
        "columns": [
            {"data": "name"},
            {"data": "designation"},
            {"data": "salary"},
            {"data": "country"}
        ]
       
    })
});

</script>			
</body>
</html>
Снимок экрана с ошибкой

Ответы [ 2 ]

0 голосов
/ 11 января 2019

После нескольких попыток и прочтения множества проблем я нахожу ответ 

<script type="text/javascript" th:inline="javascript">

  var empList = [# th:utext="${employeeList}"/]; 
  

$(document).ready(function () {
	
	  console.log(empList);	
	  
	 
	 $('#example').DataTable({
        "aaData":empList,
        "aoColumns": [
            {"mDataProp": "name"},
            {"mDataProp": "designation"},
            {"mDataProp": "salary"},
            {"mDataProp": "country"}
        ]
       
    }) 
});

</script>
0 голосов
/ 09 января 2019

Попробуйте присвоить списку сотрудников «данные», как показано ниже, 

<script th:inline="javascript">

var empList = ${employeeList};

$(document).ready(function () {

    $('#example').DataTable({
        "searching": true,
        "serverSide":false,
        "paging":true,
        "data": empList,
        "columns": [
            {"data": "name"},
            {"data": "designation"},
            {"data": "salary"},
            {"data": "country"}
        ]

    })
});

</script>

https://datatables.net/manual/data/

...