1, the directory structure
2, controller acquires data layer
package com.asiainfo.group.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class DateTableController {
@RequestMapping("/getData")
public Map<String, List<Map<String, String>>> getData(){
Map<String, List<Map<String, String>>> obj = new HashMap<String,List<Map<String,String>>>();
List<Map<String, String>> datas = new ArrayList<Map<String,String>>();
for (int i = 1; i < 11; i++) {
Map<String, String> data = new HashMap<String,String>();
data.put("id", i+"");
data.put("name", i+"张三");
data.put("age", "20");
data.put("sex", "女");
datas.add(data);
}
obj.put("mydata", datas);
return obj;
}
}
3, demo page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(function(){
$('#table_id_example').DataTable({
ajax: {
url: '/getData',
dataSrc: 'mydata'
},
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'age' },
{ data: 'sex' }
]
});
});
</script>
</head>
<body>
<table id="table_id_example" class="display">
</table>
</body>
</html>
