Question

我的服务，控制器和视图是：

公共类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 {
私有静态最终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>

Screenshot of Error

Answer 1

尝试将员工列表分配给“数据”，如下所示，

<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/

Answer 2

经过多次尝试并阅读了很多问题，我找到了答案

const webpack = require("webpack")
const path = require("path")

let config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "./bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react'
          ]
        }
      }
    ]
  }
}

module.exports = config

在使用Thymeleaf在Spring Boot MVC项目中实现数据表时，数据表中不会填充任何数据

2 个答案: